疑似要素を使用して Font Awesome アイコンを CSS 背景として埋め込むにはどうすればよいですか?

Font Awesome アイコンを CSS 背景に埋め込む

Web ページの美しさを向上させるために、次のような課題に遭遇しました。 CSS 背景内の画像を Font Awesome のアイコンに置き換えます。 Font Awesome スタイルシートとフォントが CSS の前に読み込まれていることを確認した場合、この変換を実行する方法についてのガイダンスを求めます。

予想に反して、テキストを背景画像として使用することは実現できません。代わりに、:before または :after 疑似クラスの力を利用します。これらの疑似クラスを使用すると、希望の位置にテキスト文字を重ね合わせることができ、追加のマークアップの必要がなくなります。

重要なのは、適切な位置を確保するために、実際のテキスト ラッパーでposition:relativeを指定することを忘れないでください。

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "AE";  /* Enter your preferred text or UTF-8 character code here */
    font-family: FontAwesome; /* Note: Adjust this CSS property for different Font Awesome versions */
    left:-5px;
    position:absolute;
    top:0;
 }

また、Font Awesome v5 では別のフォント名が必要になります仕様:

• Font Awesome v5 Free の場合: font-family: "Font Awesome 5 Free"
• Font Awesome v5 Pro の場合: font-family: "Font Awesome 5 Pro"

font-weight プロパティを対応するプロパティと揃えることを忘れないでください。 font.

さらに詳しいガイダンスが必要な場合は、ページ上のサンプル Font Awesome アイコンのフォント名を右クリックしてプロパティを調べて調べることを検討してください。

以上が疑似要素を使用して Font Awesome アイコンを CSS 背景として埋め込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。