web-dev-qa-db-ja.com

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

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

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

画像を Font Awesome のアイコンに置き換えます。

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

cssfont-awesome
272
L84

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

451
Diodeus - James MacFarlane

上のDiodeusからの答えに加えて、あなたはfont-family: FontAwesome規則が必要です（あなたがすでにCSSで宣言されているFontAwesomeの@font-face規則があると仮定します）。次に、どのCSSコンテンツ値がどのアイコンに対応するのかを知ることです。

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

66
Astrotim

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

Font-Awesome CSS File screenshot

20
Akash

上記のすべてをまとめると、以下が最終的なクラスになります。

   .faArrowIcon {
        position:relative;
    }

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

このサンプルクラスを試すことができます。そしてここでアイコンの内容を見つけて下さい： 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";
    }
5
Shiv Singh

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>
2
George Hix
#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

1
Pervez

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 - HTMLのクラス要素にフォントを適用するために下のCSSを使用

.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;
}

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

1
Ravindra Vairagi

あるいは、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.
}
1
Hiura

これを行うには、必要な要素に：beforeまたは：afterを使ってcontent属性とfont-family属性を追加するだけです。

例えば、私は自分の投稿の中のすべてのa要素に after という添付ファイルアイコンを付けたいと思いました。だから、最初に私はそのようなアイコンがfontawesomeに存在するかどうか検索する必要があります。私がそれを見つけた場合のように ここ 、すなわちfa fa-Paperclip。それから私はそこのアイコンを右クリックして、それが使用しているcontentタグを取得するために::before疑似プロパティに行き、それは私の場合\f0c6であることがわかりました。それから私はこのように私のCSSでそれを使用するでしょう：

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

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

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

0
boateng