CSSで素晴らしいフォントアイコンを使用する


305

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

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

画像をFont Awesomeのアイコンに置き換えたいのですが。

CSSのアイコンを背景画像として使用する方法がわかりません。これは、CSSの前にFont Awesomeスタイルシート/フォントがロードされていると想定して実行できますか?


フォントのグリフは背景として使用できません。ただし、SVGは可能です
cimmanon 2013

@cimmanonは、それがfont-awesomeにどのように適用されるかを説明していただけませんか
BonsaiOak

@BonsaiOak選択した回答でまだ説明されていないことをどう説明しますか?これで答えられない質問(またはSOでの他の質問)がある場合は、新しい質問をしてください。
cimmanon 14

@cimmanon明快さの欠如のため申し訳ありません。font-awesome.svgフォントファイルのアイコンを背景として使用できることを暗示しているようです。しかし、あなたはそれを明示的に言ったことがないので、私にはわかりません。
BonsaiOak 2014

1
@BonsaiOakはい、他の画像と同じように、SVGを背景画像として使用できます。ただし、FontAwesome SVGをこの方法で使用できるかどうかを確認するために実際に調べたことはありません。
cimmanon 2014

回答:


489

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

フォント名を見つけるもう1つの方法は、ページのサンプルフォントの素晴らしいアイコンを右クリックしてフォント名を取得することです(utf-8アイコンコードを見つけるのと同じ方法ですが、で見つけることができます:before)。


63
各アイコンのテキストに相当するものがそこにありますfortawesome.github.io/Font-Awesome/cheatsheet
Matthieu

61
&#xを最初から削除する必要があります。最後から。font-family名はFontAwesomeです
Matthieu

5
@David、それは単なるテキストfont-sizeです。
JCM 2015年

6
FontAwesome v5の場合、使用する必要があります .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
Digvijayad

5
:beforeまたは:afterをサポートしていないように見えるため、これは(送信ボタンのような)入力要素では機能しないようです。
ミール

70

上記のDiodeusからの回答に加えて、font-family: FontAwesomeルールが必要です(@font-faceCSSでFontAwesome のルールがすでに宣言されていると仮定)。次に、どのCSSコンテンツ値がどのアイコンに対応するかを知ることです。

私はそれらすべてをここにリストしました:http : //astronautweb.co/snippet/font-awesome/


1
私はポジションを削除した後に働いた:絶対; .element:beforeで、リンクをフォントの素晴らしいアイコンで飾ることができますが、リンクのカスタムフォントを保持できます
jethroo

コンテンツ値のすばらしいリスト!
Anthony

1
@staabmによる回答で述べたように、FontAwesomeは各グリフのコードの公式リストを維持しています:fontawesome.io/cheatsheet
alxndr

24

実際、font-awesomeCSS でもアイコンスタイルを設定するための同様の戦略があります。icon コードのクイックホールドを取得する場合は、non-minified font-awesome.cssファイルを確認してください。各フォントが純粋であることがわかります

Font-Awesome CSS Fileスクリーンショット


22

上記のすべてを統合すると、次はうまく機能する最後のクラスです

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

アイコンを使用して、必要なテキストの前から以前の<i>タグを削除し、これで置き換えることができるため、最良の回答です。そして同じスペースが与えられます。
andygoestohollywood 2015年

7

このサンプルクラスを試すことができます。ここでアイコンのコンテンツを見つけます:http : //astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }

6

cssを使用して素晴らしいフォントを使用するには、以下の手順に従ってください-

ステップ1-CSSにFontAwesomeのフォントを追加する

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

ステップ-2以下のcssを使用して、HTMLのクラス要素にフォントを適用する

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

そして最後に、「sorting_asc」クラスを使用して、目的のHTMLタグ/要素にCSSを適用します。


2

CSSにコンテンツを埋め込む必要はありません。バッジのコンテンツをfa要素内に配置してから、バッジのcssを調整できます。http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

8
「CSSにコンテンツを埋め込む必要はありません」。まあ、いくつかの状況ではそれが必要です。
ステファンBruckert

2
プログレッシブエンハンスメントを気にしない場合は問題ありませんが、可能な限りCSSファイル内でスタイルを維持する必要があります。
Adam Carr

2

あるいは、Sassを使用している場合は、FAアイコンを「拡張」して表示できます。

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}


0

このためには、必要に応じて:beforeまたは:afterを介してcontent属性とfont-family属性を必須要素に追加する必要があります。

例:投稿内のすべての要素の後に添付アイコンを添付したかったa。したがって、最初にそのようなアイコンがfontawesomeに存在するかどうかを検索する必要があります。ここで見つけた場合のように、すなわちfa fa-paperclip。次に、そこのアイコンを右クリックし、::before疑似プロパティに移動して、content使用しているタグを取得します\f0c6。私の場合はです。次に、これを私のcssで次のように使用します。

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.