私は自分のサイトで(優れた)Font-Awesomeを使用していますが、次のように使用すればうまく機能します。
<i class="icon-home"></i>
しかし、(何らかの理由で)私はUnicodeのようにそれを使いたい:
<i></i>
しかし、それは機能しません-代わりにブラウザに正方形が表示されます。
これをどうやって解決しますか? CSSパスが正しい(Font Awesomeを使用する最初の方法が機能するため)。
編集:FontAwesome.otfがインストールされています。
<i></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></i>
または、i
要素にfont-family: FontAwesome
およびfont-style: normal
を設定するCSSコードを使用します。
PS。 U + F015などのプライベート使用コードポイントには、定義上、相互運用可能な意味がないことに注意してください。したがって、スタイルシートが無効になっている場合、
は文字として表示されません。ブラウザは、コードボックス番号を含む可能性のある小さなボックスなどの未定義データの存在を通信する方法を使用します。
fa
クラスを使用する必要があります。
<i class="fa">

</i>
<i class="fa fa-2x">

</i>
私は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
それが役立つことを願っています。
この投稿に出くわす可能性がある場合は、設定する必要があります
font-family: FontAwesome;
cSSセレクターのプロパティとして、UnicodeはCSSで正常に動作します
Font-Awesomeバージョン5(無料)では、「font-family:Font Awesome\5 Free; "が追加されている場合のみ、正常に動作しているようです。
これは私のために働いた:)
これが役に立つことを願っています
私はこれが働いたことを発見した
content: "\f2d7" !important;
font-family: FontAwesome !important;
それは私にとって重要なものなしでは機能しないようでした。
ユニコードを使用してソーシャルアイコンを変更する方法についてのチュートリアル https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be
このページ で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サーバーにアップロードし、通常のフォントのようにインストールすることで、この問題を修正しました。私;-
必ず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
以下に示すように、CSS3擬似セレクターでFontAwesomeアイコンを使用することもできます。
以下に示すように、font-familyをFontAwesomeに設定してください。
table.dataTable thead th.sorting:after {font-family: FontAwesome;}
上記を機能させるには、次を実行する必要があります。
<head></head>
セクションでcssフォルダーのみを参照します。 次のいずれかを使用する可能性があるため、バージョン番号も含める必要がある場合があることに注意してください。
font-family: 'Font Awesome 5 Pro';
または
font-family: 'Font Awesome 5 Free';
上記のJukka K. Korpelaの回答を追加するために、フォントawesomeは既にcssセレクター「fa」を定義しています。単に<i class="fa"></i>
を実行できます。ここでのキャッチは、faがfont-style:normalを定義することです。イタリックが必要な場合は、<i class="fa" style="font-style:italic"></i>
のようにオーバーライドできます。
私が知っている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
お役に立てれば。