CSSからfontAwesomeアイコンの使い方は？

Question

cssでfont-awesomeアイコンを使用できますか？今私はhtmlで試してみましたが、ボタン上で:after:beforeのような擬似クラスとして使用する必要があります。

ul li { 
 
    display: inline-block; 
 
} 
 

 
.right { 
 
    float: right; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<ul class="right"> 
 
    <li><button>Note <i class="fa fa-plus"></i></button></li> 
 
</ul> 
 
<ul> 
 
    <li><a href="#"><i class="fa fa-user"></i></a></li> 
 
    <li><a href="#"><i class="fa fa-book"></i></a></li> 
 
    <li><a href="#"><i class="fa fa-cart-plus"></i></a></li> 
 
</ul>

Answer 1

あなたはこのように使用することができます：ここでは赤色の大きなアイコンがあります。あなたのコードを更新しました。

ul li { 
 
    display: inline-block; 
 
} 
 

 
.right { 
 
    float: right; 
 
} 
 

 
button:after { 
 
    content: "\f067"; 
 
    font-family: FontAwesome; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-decoration: inherit; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-left: 5px; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<ul class="right"> 
 
    <li><button>Note</button></li> 
 
</ul> 
 
<ul> 
 
    <li><a href="#"><i class="fa fa-user"></i></a></li> 
 
    <li><a href="#"><i class="fa fa-book"></i></a></li> 
 
    <li><a href="#"><i class="fa fa-cart-plus"></i></a></li> 
 
</ul>

Answer 2

あなただけの要素にFontAwesomeフォントを設定し、ユニコードと擬似要素を追加する必要があります。あなたは要素を検査した場合

ul li { 
 
    display: inline-block; 
 
} 
 

 
.right { 
 
    float: right; 
 
} 
 

 
button { 
 
    font: normal normal normal 14px/1 FontAwesome; 
 
} 
 
button:after { 
 
    content: "\f217"; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<ul class="right"> 
 
    <li><button>Note</i></button></li> 
 
</ul>

Answer 3

あなたはフォントかっこいいこのように使用できることがわかります：

.my-icon:before { 
 
    content: "\f02d"; /* The content of book icon*/ 
 
} 
 
.my-icon { 
 
    display: inline-block; 
 
    font: normal normal normal 14px/1 FontAwesome; 
 
    font-size: inherit; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<ul> 
 
    <li><a href="#"><i class="my-icon"></i></a></li> 
 
</ul>

アイコンを使用するには、各アイコンのコードを見つける必要があります。あなたはそのアイコンを使って要素を調べることで簡単にこれを行うことができます（例えばfont-awsomeのウェブサイトで）。

そして、あなたはまた、フォントサイズを変更することで、アイコンの大きさを制御することができます。

.my-icon:before { 
 
    content: "\f02d"; /* The content of book icon*/ 
 
    font-size: 32px; 
 
    color:red; 
 
} 
 
.my-icon { 
 
    display: inline-block; 
 
    font: normal normal normal 24px/1 FontAwesome; 
 
    font-size: inherit; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<ul> 
 
    <li><a href="#"><i class="my-icon"></i></a></li> 
 
</ul>

Answer 4

span:before{ 
 
    content: "\f0c9"; 
 
    font-family: 'FontAwesome'; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<span>hello</span>