324

私はこのようなCSSを持っています：

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

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

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

4

12 に答える 12

528

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

于 2013-02-06T18:56:59.100 に答える
71

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

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

于 2013-02-07T01:20:11.670 に答える
25

実際、font-awesomeCSSでさえ、アイコンスタイルを設定するための同様の戦略を持っています。icon コードをすばやく把握したい場合は、non-minified font-awesome.cssファイルを確認してください。各フォントは純粋です。

フォント-素晴らしいCSSファイルのスクリーンショット

于 2015-11-27T09:45:35.303 に答える
22

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

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }
于 2015-08-31T07:37:55.080 に答える
12

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を適用します。

于 2018-08-03T05:30:14.940 に答える
8

このサンプルクラスを試すことができます。ここでアイコンのコンテンツを見つけてください：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";
    }
于 2015-08-25T10:23:53.413 に答える
5

私はパーティーに少し遅れています。別の方法を提案するのと同じように。

  button.calendar::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free';
    left: -4px;
    bottom: 4px;
    position: relative;
  }

position、leftおよびbottomはアイコンの配置に使用されます。

追加font-weight: 600または上記も役立つ場合があります。

于 2020-09-15T09:42:51.173 に答える
3

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>
于 2015-07-01T19:29:20.887 に答える
3 
#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

リンクの例： https ：//codepen.io/bungeedesign/pen/XqeLQg

https://fontawesome.com/cheatsheet?from=ioからアイコンコードを取得し ます

于 2018-08-14T07:44:01.397 に答える
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.
}
于 2018-06-11T07:59:48.013 に答える
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 */
    }
于 2017-07-06T23:00:54.690 に答える
-1

コマンドラインから次のPythonプログラムを使用して、Font-Awesomeアイコンからpng画像を作成します。

https://github.com/Pythonity/font-awesome-to-png

于 2016-09-27T16:41:52.260 に答える