疑似クラスを使用して CSS で画像を Font Awesome アイコンに置き換えるにはどうすればよいですか?

Font Awesome アイコンを CSS に組み込む

CSS コードで、画像を Font Awesome のアイコンに置き換えることを目的としています。ただし、CSS で背景画像としてアイコンを使用することはサポートされていません。

疑似クラスによる解決策:

:before や :before などの疑似クラスを利用できます。 :after を使用して、テキスト文字を必要な場所に配置し、余分な文字を配置する必要がなくなります。 markup.

.mytextwithicon {
    position:relative;
}

.mytextwithicon:before {
    content: "AE";  /* Replace with desired UTF-8 character code */
    font-family: FontAwesome;
    position:absolute;
    top:0;
    left:-5px;
}

Font Awesome v5 フォント名:

• 無料バージョン: font-family: "Font Awesome 5 Free"
• Pro バージョン: font-family: "Font Awesome 5 Pro"

その他の考慮事項:

• CSS の前に Font Awesome スタイルシートとフォントがロードされていることを確認してください。
• 正確なテキストラッパーのposition:relativeプロパティ
• 一貫性を保つためにフォントの太さを指定します (通常は 900 に設定します)。

追加のヒント:

を右クリックしますページ上のサンプル Font Awesome アイコンでは、フォント名と UTF-8 アイコンを提供できます。コード。

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