☰

CSSでFont Awesomeアイコンを使用する 質問する

tag-icon • tag-icon css font-awesome
CSSでFont Awesomeアイコンを使用する 質問する

次のような CSS があります:

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

画像をアイコンに置き換えたいのですが素晴らしいフォント。

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

ベストアンサー1

テキストを背景画像として使用することはできませんが、: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;
 }

編集：

Font Awesome v5 では、以前のバージョンとは異なるフォント名が使用されます。

  • FontAwesome v5 無料版の場合は以下を使用します:font-family: "Font Awesome 5 Free"
  • FontAwesome v5、Pro バージョンの場合は以下を使用します。font-family: "Font Awesome 5 Pro"

同じfont-weightプロパティも設定する必要があることに注意してください (900 のようです)。

フォント名を見つける別の方法は、ページ上のサンプルの Font awesome アイコンを右クリックしてフォント名を取得することです (UTF-8 アイコン コードを見つけるのと同じ方法ですが、 で見つけることができることに注意してください:before)。

おすすめ記事