web-dev-qa-db-ja.com

Font AwesomeおよびUnicode

私は自分のサイトで（優れた）Font-Awesomeを使用していますが、次のように使用すればうまく機能します。

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

しかし、（何らかの理由で）私はUnicodeのようにそれを使いたい：

<i>&#xf015;</i>

（ Font Awesomeのチートシート ）

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

これをどうやって解決しますか？ CSSパスが正しい（Font Awesomeを使用する最初の方法が機能するため）。

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

htmlcssunicodefont-awesome
45
matan129

<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>

または、i要素にfont-family: FontAwesomeおよびfont-style: normalを設定するCSSコードを使用します。

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

44
Jukka K. Korpela

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

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

<i class="fa fa-2x">
   &#xf000;
</i>
35
Behrang

私はunicodeとfontawesomeを使用して、同様の問題に直面しました。私が書いたとき：

font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */

Google Chromeでは、アイコンの代わりに正方形が表示されます。 Font Awesomeの新しいバージョンには次のものも必要です

font-weight: 900;

それは私の仕事です。

から： https://github.com/FortAwesome/Font-Awesome/issues/11946

それが役立つことを願っています。

33
Basile

この投稿に出くわす可能性がある場合は、設定する必要があります

font-family: FontAwesome;

cSSセレクターのプロパティとして、UnicodeはCSSで正常に動作します

23
donnelj

Font-Awesomeバージョン5（無料）では、「font-family：Font Awesome\5 Free; "が追加されている場合のみ、正常に動作しているようです。

これは私のために働いた:)

これが役に立つことを願っています

6
Bmuzammil

私はこれが働いたことを発見した

content: "\f2d7" !important;
font-family: FontAwesome !important;

それは私にとって重要なものなしでは機能しないようでした。

ユニコードを使用してソーシャルアイコンを変更する方法についてのチュートリアル https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be

2
Web Limitless

このページ でdavidhundの答えを読んだ後、私はあなたのウェブフォントが正しくロードされていないという解決策を思いつきました間違ったパスの問題。

ここに彼が言ったことがあります：

私の最初の推測は、異なる（サブ）ドメインのFontAwesome Webフォントを含めることです。そのため、これらのwebfont-filesに正しいヘッダーを設定してください：「Access-Control-Allow-Originヘッダーを追加して、アセットをプルするドメインをホワイトリストに登録する必要があります。」 https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86

また、 font-gotchas も見てください:)

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

同じページで、f135taは言った：

...ファイル "fontawesome-webfont.ttf"をWebサーバーにアップロードし、通常のフォントのようにインストールすることで、この問題を修正しました。私;-

1
Mohammad Areeb Siddiqui

必ずFontAwesomeスタイルをロードしてください。

font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f007";

FontAwesomeの説明はここにあります： https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

1
Yoann Carrer

以下に示すように、CSS3擬似セレクターでFontAwesomeアイコンを使用することもできます。 enter image description here

以下に示すように、font-familyをFontAwesomeに設定してください。

table.dataTable thead th.sorting:after {font-family: FontAwesome;}

上記を機能させるには、次を実行する必要があります。

  1. ここからFontAwesome cssライブラリをダウンロードします FontAwesome v4.7.
  2. Zipファイルから抽出し、アプリのルートフォルダーに以下の2つのフォルダーを含めます。 enter image description here
  3. 以下に示すように、アプリの<head></head>セクションでcssフォルダーのみを参照します。 enter image description here
1
Frederick Eze

次のいずれかを使用する可能性があるため、バージョン番号も含める必要がある場合があることに注意してください。

font-family: 'Font Awesome 5 Pro';

または

font-family: 'Font Awesome 5 Free';
0
omarjebari

上記のJukka K. Korpelaの回答を追加するために、フォントawesomeは既にcssセレクター「fa」を定義しています。単に<i class="fa">&#xf015;</i>を実行できます。ここでのキャッチは、faがfont-style：normalを定義することです。イタリックが必要な場合は、<i class="fa" style="font-style:italic">&#xf015;</i>のようにオーバーライドできます。

0
kali sharma

私が知っている3つの異なるフォントファミリがあり、選択することができ、それぞれに適用する必要のある独自のウェイト要素があります。

最初

font-family: 'Font Awesome 5 Brands'; content: "\f373";

第二

font-family: 'Font Awesome 5 Free'; content: "\f061"; font-weight: 900;

三番

font-family: 'Font Awesome 5 Pro';

ここで参照- https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

お役に立てれば。

0
Abhishek R