70

私は自分のサイトで (優れた) Font-Awesome を使用していますが、次のように使用すると問題なく動作します。

<i class="icon-home"></i>

しかし(何らかの理由で)次のようにUnicodeの方法で使用したい:

<i>&#xf015;</i>

( Font Awesome のチートシート)

しかし、それは機能しません - ブラウザは代わりに正方形を表示します。

これを解決するにはどうすればよいですか?CSS パスは正しいです (Font Awesome を使用する最初の方法が機能するため)。

編集: FontAwesome.otf がインストールされています。

4

16 に答える 16

66

<i>&#xf015;</i>イタリック書体を使用して私用コードポイント U+F015 を表示するようブラウザに要求するだけなので、これは機能しません。Font Awesome CSS コードには、これに影響するものは何もありません。タグに追加class=icon-homeすると、FontAwesome フォントの U+F015 に割り当てられたグリフが取得されますが、Font Awesome のトリックのしくみにより、2 回取得されます。

グリフを一度だけ取得するには、生成されたコンテンツを介してグリフを追加するルールをトリガーせずに、FontAwesome フォントの使用を要求する CSS を使用する必要があります。簡単なトリックは、で始まるクラス名を使用することですがicon-、Font Awesome の定義済みの名前や、CSS または JavaScript コードで使用されている名前とは一致しません。例えば、

<i class=icon-foo>&#xf015;</i>

または、要素にfont-family: FontAwesomeとを設定する CSS コードを使用します。font-style: normali

PS。U+F015 などの私用コード ポイントには、定義上、相互運用可能な意味がないことに注意してください。したがって、スタイル シートが無効になっている場合、&#xf015;はどの文字としても表示されません。ブラウザは、おそらくコード ポイント番号を含む小さなボックスなど、未定義のデータの存在を伝える方法を使用します。

于 2013-06-23T01:37:56.547 に答える
42

fa次のクラスを使用する必要があります。

<i class="fa">
   &#xf000;
</i>

<i class="fa fa-2x">
   &#xf000;
</i>
于 2014-03-23T23:38:35.340 に答える
1

Font Awesome バージョン 4.7 をお使いの方は、

css_selector::before{
content:"\f006";
font-family:"fontawesome";
font-weight:900;
}
于 2020-09-28T12:21:19.743 に答える
1

このページでdavidhundの回答を読んだ後、Web フォントが正しく読み込まれていないという解決策を思いつきました。これは、パスが間違っているためです。

彼が言ったことは次のとおりです。

私の最初の推測は、別の (サブ) ドメインから FontAwesome Web フォントを含めているということです。そのため、それらの webfont-files に正しいヘッダーを設定してください。 https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86

また、フォントの落とし穴も見てください:)

私が明確であなたを助けてくれることを願っています:)

同じページで、f135taは次のように述べています。

...ファイル「fontawesome-webfont.ttf」をWebサーバーにアップロードし、通常のフォントのようにインストールすることで問題を修正しました.とにかくそれを使用するための前提条件の一部であるかどうかはわかりませんが、自分 ;-

于 2013-06-22T19:23:10.583 に答える
0

上記の Jukka K. Korpela の回答を追加すると、font awesome はすでに css セレクター「fa」を定義しています。簡単にできます<i class="fa">&#xf015;</i>。ここでの問題は、fa が font-style:normal を定義していることです。斜体が必要な場合は、次のようにオーバーライドできます。<i class="fa" style="font-style:italic">&#xf015;</i>

于 2014-01-16T05:15:58.260 に答える