背景画像の代わりに疑似クラスを使用して、Font Awesome アイコンを CSS に統合するにはどうすればよいですか?

CSS への Font Awesome アイコンの統合

Font Awesome アイコン ライブラリを使用すると、CSS スタイルを強化する便利で効率的な方法です。ただし、背景画像としてアイコンを組み込むことには課題が生じます。

背景画像を使用した標準的なアプローチ

従来、画像は CSS の背景要素として使用されていました。以下に例を示します。

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

疑似クラスを使用した代替アプローチ

CSS で Font Awesome アイコンを利用するには、:before または :after 疑似クラスを利用できます。クラス。これらを使用すると、追加のマークアップを必要とせずにテキスト文字を特定の場所に追加できます。

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "AE";  /* Insert your desired icon code here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

上記の例では、「25AE」は特定のアイコンの UTF-8 コードを表します。 Font Awesome Web サイトでさまざまなアイコンのコードを見つけることができます。

Font Family

Font Awesome の最新バージョン (v5 ) では、適切なフォント ファミリーを指定する必要があります。フォントファミリー:

• 無料版の場合: font-family: "Font Awesome 5 Free"
• プロ バージョンの場合: font-family: "Font Awesome 5 Pro"

Font Weight

さらに、フォントの太さのプロパティが、選択したアイコンのスタイルと一致していることを確認します。 Font Awesome は通常、ウェイト 900 を使用します。

フォント名の決定

正しいフォント名を確認するには、ページ上の Font Awesome アイコンを右クリックして検査します。要素。フォント名は CSS セクションに表示されます。

以上が背景画像の代わりに疑似クラスを使用して、Font Awesome アイコンを CSS に統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。