CSS コンテンツで Font Awesome アイコンを使用するにはどうすればよいですか?

CSS コンテンツでの Font Awesome アイコンの使用

CSS の content 属性内で Font Awesome アイコンを利用しようとすると、次のような問題が発生する可能性があります。その中に HTML コードを埋め込むことができないための問題context.

Font Awesome 5 以降

Font Awesome 5 以降の場合は、次の手順を実行する必要があります:

• フォントを定義するファミリーの場合は、ご使​​用の環境に応じて「Font Awesome 5 Free」または「Font Awesome 5 Brands」のいずれかを指定してください。目的のアイコン タイプ。
• content プロパティを含めますが、HTML エンティティの代わりに対応する Unicode エスケープ シーケンスを使用します。
• フォントの太さを 900 に設定します。

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

Font Awesome 4 と以前

Font Awesome 4 以前のバージョンの場合は、次の手順を採用します。

• Font Awesome スタイル シートを見つけます。
• 対象のクラスを特定します。アイコン (fa-phone など)。
• そのクラスに関連付けられたコンテンツ プロパティをコピーします。これにはエンティティ コードが含まれています。
• CSS 内でこのコードを使用し、コンテンツ属性に割り当てます。

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

間隔の調整

アイコンとテキストの間にスペースが必要な場合は、以下を微調整しますsettings:

• 表示プロパティを inline-block に設定します。
• a:before セレクターで、適切なパディング右値を指定します。

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

ホバー効果

ホバー時のアイコンを変更するには、 :hover 用の別のセレクターを追加し、その content 属性内で更新された Unicode エスケープ シーケンスを指定します:

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

Width Adjustments

サイズの違いによるアイコンの移動を避けるため、基本宣言で固定幅を設定することを検討してください:

a:before {
    /* Other properties here, as seen in previous code snippets */
    width: 12px; /* Set a desired width to prevent icon shifting */
}

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