Font AwesomeアイコンをCSSコンテンツとして使用する質問する

Question

FontAwesome 5の ^{アップデートオーレリアン}

レンダリングしようとしているアイコンの種類に応じて、をORfont-familyに変更する必要があります。また、宣言することを忘れないでください。Font Awesome 5 BrandsFont Awesome 5 Freefont-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

デモ

どのように動作するかを理解し、アイコンとテキスト間の間隔に関する回避策を知るには、以下の回答の残りを読んでください。

FontAwesome 4以下

これは間違った使い方です。Font awesome スタイルシートを開き、class使用したいフォントのに移動しfa-phone、エンティティを含むそのクラスのコンテンツプロパティをコピーして、次のように使用します。

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

デモ

特定のタグをターゲットにしたい場合は、次のように、より具体的にするためにaを使用することを検討してください。class

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

上記の方法を使用すると、アイコンが残りのテキストと一緒に貼り付けられるので、2 つのアイコンの間に少しスペースを空けたい場合は、display: inline-block;次のようにしますpadding-right。

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

この回答をさらに拡張すると、多くの人がホバー時にアイコンを変更する必要がある可能性があるため、そのために別のセレクターと:hoverアクションのルールを記述できます。

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

デモ

上記の例では、アイコンはサイズの違いにより動いてしまいますが、これは望ましくありません。そのため、width次のようにベース宣言で固定値を設定できます。

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

デモ

Answer 1