Font Awesome アイコンを CSS コンテンツとして使用するには?

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

Font Awesome アイコンを CSS コンテンツとして使用する場合は、コンテンツ プロパティ内に HTML コードを直接埋め込むことは避けてください。代わりに、次の手順に従ってください:

FontAwesome 5:

1. フォント ファミリを「Font Awesome 5 Free」または「Font Awesome 5 Brands」として定義します。アイコンのタイプ。
2. HTML エンティティの代わりに Unicode エスケープ コードを使用します。アイコン (例: 「fa-phone」の「f095」)。
3. フォントのウェイトが 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 以下:

1. content プロパティをFont Awesome スタイル シートの対応するエンティティ。
2. コンテンツ プロパティ内でコピーしたコンテンツを正しいフォント ファミリで使用します。

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

アイコンとテキストの間のスペース:

1. 表示を設定: inline-block;アイコンが重ならないようにします。
2. 右にパディングを追加: 2 つの間にスペースを確保します。

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

カーソルを合わせたときにアイコンを変更するには:

1. :hover 状態用に別のセレクターを作成します。
2. 指定するコンテンツ プロパティを変更します。ホバー アイコンの新しい Unicode エスケープ コード。

a:hover:before {
    content: "\f099";
}

アイコン サイズの違いによるナッジを防ぐために、ベース アイコン宣言に固定幅を設定することを検討してください。

以上がFont Awesome アイコンを CSS コンテンツとして使用するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。