86

WebページでFontAwesomeを使用していて、:before疑似要素内にアイコンを表示したいと思います。

ドキュメント/チートシートによると、このフォントを取得するには入力する必要がありますが、機能していません。HTMLエンティティはでサポートされていないため、これは正常だと思います:before
そこで、少しグーグルで調べたところ、HTMLエンティティをで表示する:before場合は、エスケープされた16進参照を使用する必要があることがわかりました。
そのため、への16進参照を検索していましたが、何も見つかりませんでした。それは、それが何を意味するにせよ、これらは「私的使用」の価値観だからだと思います。

それを機能させる方法はあります:beforeか?

4

6 に答える 6

154

CSSでは、FontAwesomeユニコードは、正しいフォントファミリが宣言されている場合にのみ機能します(バージョン4以下)。

font-family: "FontAwesome";
content: "\f066";

更新-バージョン5の名前は異なります。

無料

font-family: "Font Awesome 5 Free"

プロ

font-family: "Font Awesome 5 Pro"

ブランド

font-family: "Font Awesome 5 Brands"

この関連する回答を参照してください: https ://stackoverflow.com/a/48004111/2575724

コメント(BuddyZ)によると、ここでいくつかの詳細情報https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started

于 2014-08-15T15:26:21.707 に答える
124

のエスケープされた16進参照はです\f066

content: "\f066";
于 2013-01-12T15:52:57.340 に答える
11

Fileformat.infoは、このようなもののかなり良いリファレンスです。あなたの場合、それはすでに16進数になっているので、16進数の値はf066です。だからあなたはするだろう:

content: "\f066";
于 2013-01-12T15:53:23.257 に答える
3

アイコンフォントのトリックで使用されるコードポイントは通常、私的使用のコードポイントです。つまり、一般的に定義された意味はなく、利害関係者間の私的な合意によってのみ、オープンな情報交換で使用されるべきではありません。ただし、私用コードポイントは他のUnicode値として表すことができます。たとえば、CSSでは、他の\f066人が答えているように、のような表記を使用します。ドキュメントがUTF-8でエンコードされており、オーサリング環境で任意のUnicode値をその番号で入力する方法を知っている場合は、コードポイントをそのまま入力することもできます(ただし、通常は不明な記号を使用して表示されます)キャラクター)。

ただし、これはアイコンフォントを使用する通常の方法ではありません。通常、フォントで提供されるCSSファイルを使用し、のような構造を使用します<span class="icon-resize-small">foo</span>。CSSコードは、要素の先頭にシンボルを挿入する処理を行います。コードポイント番号を知る必要はありません。

于 2013-01-12T18:40:01.330 に答える
1

最初にHTMLファイル内のfontwaesomeCSSファイルをリンクし、次に「font-family: "FontAwesome"; content: "\f101";」のような後または前の疑似クラスを作成します。次に保存します。これがうまくいくことを願っています。

于 2018-04-11T04:07:28.867 に答える
0

重要なこと-それを機能させるには、font-weight(font-weight:900)を追加する必要があります。

于 2021-07-22T14:59:57.867 に答える