[解決済み】CSSでFont Awesome アイコンを使用する

質問

以下のようなCSSがあります。

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

のアイコンで画像を置き換えたいのですが。 フォント・オーサム .

CSSでアイコンを背景画像として使用する方法が見当たりません。Font Awesomeスタイルシート/フォントが私のCSSの前に読み込まれていると仮定して、これを行うことは可能でしょうか？

解決方法を教えてください。

テキストを背景画像として使用することはできませんが :before または :after 擬似クラスを使用すると、面倒なマークアップを追加することなく、テキスト文字を好きな場所に配置することができます。

必ず position:relative を実際のテキストラッパーで使用すると、位置決めがうまくいきます。

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

EDITです。

Font Awesome v5では、旧バージョンと異なるフォント名を使用しています。

• FontAwesome v5、無料版の場合、使用してください。 font-family: "Font Awesome 5 Free"
• FontAwesome v5、Pro版については、こちらをご利用ください。 font-family: "Font Awesome 5 Pro"

なお、同じ フォントウェイト プロパティもあります（900のようです）。

フォント名を調べるもう一つの方法は、ページ上のサンプルフォントのすごいアイコンを右クリックしてフォント名を取得することです（utf-8のアイコンコードが分かるのと同じ方法ですが、注意していただきたいのは、それを :before ).