Font awesomeにアイコンが表示されない

99

私はFont Awesomeを使用していますが、HTTPでCSSを追加したくありません。Font Awesomeをダウンロードしてコードに含めましたが、Font Awesomeはアイコンではなく境界線の付いた四角いボックスを表示しています。これが私のコードです：

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

四角い枠の代わりにアイコンを表示する方法を教えてください。

html  css  font-awesome 
— ガネーシュH
ソース
5
これは以前に何度も尋ねられました。フォントファイルも含めていることを確認してください。CSSだけでなく、stackoverflow.com
— questions / 14366158 /
— Mehavel
font-awesomeフォルダーがあるフォルダー構造で質問を更新してください。これにより、「font-awesome.min.css」がttfパスを正しく取得しているかどうかを確認できます。cssのみが機能しません。
— Ajit Hogade
— rishta

回答:

84

私の場合、CSSコードで次の誤りを犯しました。

*{
    font-family: 'Open Sans', sans-serif !important;
}

これにより、ページ全体のすべてのフォントファミリルールが上書きされます。私の解決策は、コードを本体に移動することでした。

body{
    font-family: 'Open Sans', sans-serif;
}

注意：!importantcssでフラグを使用すると、同じ要素で同じタイプで宣言されている他のcssルールはオーバーライドされます。

— ダニエル・バルデ
ソース
4
これが私の解決策でした。私は*{font-family: Raleway}それを変更しました*.not(i) {font-family: Raleway}
— fungusanthrax
私もこの問題を抱えていましたが、DevToolsではFontAwesomeが使用されているように見えたので、長い間それを認識していませんでした。詳細については、私の回答を参照してください。
— Dagmar 2018年
59

開くfont-awesome.min.cssと、次のパスが表示されます。

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

つまり、ディレクトリを作成してから、Fontsファイルfontawesome-webfont.ttf（fontawesome-webfont.woff、fontawesome-webfont.eot）をこのフォルダーにコピーする必要があります。その後、すべてが正常に動作するはずです。

— ユーザー2980426
ソース
少なくとも0.8.1以降、font-awesomeは参照されていません。3つのがありますsummernote拡張子を持つフォントフォルダ内のファイルeot、ttfおよびwoff配布することの必要性は。
— ficuscr 2016
2
4.6.3（以前ではない場合）では、問題が発生するのは大文字と小文字が区別されfontsないFontsシステムではなく、注意してください...
— Jason
1
font awesomeが自分のWebサイトでそれを言わないのはなぜですか？それは本当に明示的ではありません。
— マット
驚くばかり！フォントはcssと同じフォルダにある必要があると思いました。1つ上のフォルダレベルにする必要があります。
— Giovani Vercauteren
また、ライブラリが最新であることを確認してください。バンドキャンプのロゴを除くすべてのロゴがありました。更新した4.7をダウンロードしてファイルを置き換えると、問題なく動作しました。
— ライアンウォーカー
45

font awesomeの新しいバージョン（5）は、"fas"または接頭辞の"fab"代わりに使用することに注意してください"fa"。

彼らのウェブサイトから引用：

faプレフィックスはバージョン5で廃止されました。新しいデフォルトは、ブランドのfasソリッドスタイルとfabスタイルです。

これが、フォントに空白の四角が表示されていた理由です。修正されました。

コード例：

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

参照：https : //fontawesome.com/icons/facebook-f?style=brands

— クリストン
ソース
これで完了です。ドキュメントで更新されていないのは奇妙です
— GroomedGorilla
これが機能した唯一のものでした。最新バージョンを使用している場合は、これを使用してください。
— samurdhilbk
ライブセーバー！"fa fa-bars"に変更
— 厄介な
ありがとう、私にとっては、fasで動作するアイコンとfabで動作するアイコンがあります。
— user1620090
したがって、新しいバージョンがfasである場合、クラスを「fas」から「fa」に変更する必要があるのはなぜですか
— Sam
22

まず、class = "fa"があり、アイコンのクラスが何であっても確認します。だからだけでなく

<i class="fa-pencil" title="Edit"></i>

だけでなく

<i class="fa fa-pencil" title="Edit"></i>

その後、期待どおりに動作します。これで私の問題は解決しました。

— OneMoreQuestion
ソース
1
これでうまくいきました。私にとって、fab fa-envelopは機能していませんでしたが、fa fa-envelopは機能していました。非常に奇妙ですが、私の問題は修正されました。
— ジョーダンシューツ
@JordanSchuetz "fab"は、 "fab fa-facebook-f"などのブランドアイコンに固有です。新しいバージョンでは、「ソリッド」バリエーションの「fas」が見つかるので、新しいバージョンでは「fas fa-envelope」に固定され、古いバージョンでは「fa fa-envelope」に固定されます。
— テッサ
20

font-awesome.cssのTheresコードを開きます。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

次のようなフォルダが必要です：

font awesome -> css
 -> fonts

または最も簡単な方法：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
— エルガ・カンドリー
ソース
11

CSSファイルへのパスが正しいことを確認してください。絶対リンクを優先するのではなく、どこから開始するかがわかっているため、理解しやすく、検索エンジンも相対リンクよりも優先します。そして、帯域幅を減らすために、font-awesomeサーバーからのリンクを使用します。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">

さらに、それを使用すれば、サーバーに追加のフォントをアップロードする必要がなくなり、適切なCSSファイルをポイントしていることを確認できます。また、最新のアップデートをすぐに利用できます。

— バレンティンメルシエ
ソース
10
私は同じことをしましたが、まだ四角い箱しかありませんでした
— Vipul Hadiya
5

私は同じ問題を扱っていたので、新しいバージョン（5以降）を使用する必要があることがわかりました

このcdnを使用すると機能します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
— ハリド
ソース
4

まず、両方を使用することはできません。font-awesome.css font-awesome.min.css

通常は、font-awesome.css開発中に使用font-awesome.min.cssし、サイトに満足できたら切り替えます。

このような問題は、相対パスと場所が原因で発生することが多いので、htmlファイルとCSSの関係を確認してください。

HTMLファイルがベースディレクトリにあり、CSSがルートのサブフォルダーにある場合、次のものが必要です href="./css/font-awesome.css"（単一のピリオド）。

— ポール
ソース
4

上記のすべては正しいですが、私の問題は、FA5の無料バージョンをダウンロードしていないことです。

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

v5を機能させることができなかったため、上記の投稿を参考にして4.7.0に戻し、問題を修正しました。

— ミッカーズ
ソース
1
FontAwesomeのv5 +の動作にも問題がありました。cssで「webfonts」フォルダーを「fonts」に変更し、同じ方法で配置したが、正しく動作しなかった。ファイルをv4.7.0に置き換え、それは魅力のように機能します。Hrm。
— Lisa Cerilli
1
バージョン5では、アイコンのfont-familyは「FontAwesome」ではなくなりました。無料版では、プロ版では「Font Awesome 5 Free」と「Font Awesome 5 Pro」になりました。いくつかの場所で文字コードを手動で使用していて、フォントファミリが設定されていないために機能しなくなったときに、この問題が発生していました。
— テッサ
4

私は同じ問題に直面していました。なので、素晴らしいフォントをダウンロードする代わりに、htmlコードにリンクを追加しました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
スニペットを展開

— Hrithik Verma
ソース
私はこのfontawesome修正するために24時間を費やして、どうもありがとうございました
— マシューMagante
2

CDNとJavaScriptインクルード（このページで説明）を使用してFont Awesomeを正常にインストールしました。次に、HTMLとCSSをいくつかのレガシーページにコピーしようとすると、アイコンの代わりに空の四角いボックスが表示されました。

私はダニエルの答え（上記）を見て、私のレガシーCSSファイルが巨大（そして何年も前）だったので、それが問題だと思った。しかし、Chrome DevToolsを見ると、Font Awesomeがロードされているように見えました。

CSS for Font Awesome Iconのスクリーンショット

問題がある場合は、取り消し線でフォントが表示されると予想していました...しかし、すべてのオプションを使い果たしたので、計算されたスタイルを確認し、Font Awesomeフォントが使用されていないことを確認しました。（下部のレンダリングされたフォントを参照してください）

Font Awesomeは使用されていません

私のレガシーCSSファイルはめちゃくちゃだったので、触れない方がいいと思ったので、これでだまされました-誰にも言わないでください:)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

また、Font Awesomeバージョン4.7.0からバージョン5.4.1にアップグレードすると、この問題は解消されました。このセットアップガイドとこのHTML を使用しました

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>
— ダグマー
ソース
2

SCSSとNPMパッケージを使用している人のために、これが私の解決策です：

npm i --save @fortawesome/fontawesome-free

次に、SCSSファイルの上部（理想的には、アプリケーションのルートにインポートされたSCSSファイル）：

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';
— ジェフ・ディーデリックス
ソース
興味深い追加による@fortawesome/fontawesome-free/css/all.css修正
— Andy Braham
1

私の場合：font-awesome.min.cssファイルだけでなく、font-awesomeフォルダー全体をプロジェクトのcssフォルダーにコピーする必要があります。

— sst
ソース
1

そのためstyle='font-weight:normal;'、要素に直接フォントを追加または変更すると.fas{font-weight:900}、Font AwesomeのCSSファイルの定義が上書きされるようです。フォントは、それが動作するフォントファイル内で特定の定義を持っていると思います。font-weightは501から1000の間に設定する必要があるようです。そうしないと、フォントが正方形のブロックのように見える場合があります。

— ジェームス・ウィルキンス
ソース
1

私の問題はほとんどの票を持っている問題でした

*{
font-family: xxxxx
}

これに変更すると問題が解決しました

body{
font-family: xxxx
}
— ジャムシャー
ソース
0

VCS（gitなど）を使用して、アイコンファイルをサーバーに転送した可能性があります。gitさんのコメント：

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

おそらくフォントを修正する必要があります。

— リスタ
ソース
0

私はあなたがあなたのルートフォルダにcssフォルダにとどまるようなフォントフォルダを持っていないと思います。

デモ

ここに画像の説明を入力してください

そしてcssフォルダは

ここに画像の説明を入力してください

そしてフォントフォルダのような

ここに画像の説明を入力してください

うまくいくと思います。

ありがとうございます。

— オバイドゥルハク
ソース
0

MacOS Mojaveでは、Safariでこの問題が発生しました。フォントの素晴らしい画像はChromeでは機能しましたが、Safariでは機能しませんでした。そのため、このサイトではないと確信しました。

Safariメニューの[環境設定]に移動し、[プライバシー]タブで[クロスサイトトラッキングを防止する]をオフまたはオフにすることで、レンダリングさせました。

なぜこれが修正されたのかはわかりませんが、修正されました。

— マイケルシュルマン
ソース
0

5.10.1バージョンに基づいています。

私の解決策（ローカル）：

  1. 「fontawesome.css」または「fontawesome.min.css」を使用している場合は、代わりに「cssフォルダーにある」「all.css」を使用してみてください。

  2. ダウンロードしたfontawesomeパッケージの「css」フォルダーと「webfonts」フォルダーは、互いに同じレベルにある必要があります。

私の場合、すでにcssフォルダーがあったため、fontawesome cssフォルダーの名前を「css-fa」に変更しました。

cssフォルダーに「css-fa」と「webfonts」の両方があるので、テキストエディターで正しくリンクするだけで機能します。

例：link rel = "stylesheet" href = "css / css-fa / all.css"

— トゥトゥアヤン
ソース
0

対象の重要なフォントファミリーセレクターをから* { ... } に変更することを解決し ました *:not(i) { ... }

（scssプリプロセッサを使用）; 解決してほしい

— バックシロ
ソース
0

以下のコードはfont-awesome 4.70.0です。font-awesome 5.11.2に移動するには、ここをクリックしてください。

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>
— PythonMaster202
ソース
0

私はこのチュートリアルに従ってFont Awesome Pro 5.13を自分でホストしていました。

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

何らかの理由で<link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">、ロードできなかったため、webfonts正方形のみが表示されました。しかし、私が使用したとき、<script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>すべてが働き始めました。両方のリンクがHTMLで追加されました<head>。

— オグラス
ソース
このjsの問題は、ファイルの負荷が高いことです
— exequielc
0

私はscssでfa 5.0.13をdrupal 8に追加しようとしていました。スタイルはデフォルトではメインに含まれていませんfa.scssは手動で追加する必要がありました。

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";
— ぼんきさま
ソース
0

あなたはcssフォルダにfont-awesomeファイルを入れて変更する必要があります

href = "../ css / font-awesome.css"からhref = "css / font-awesome.css"へ

もう1つ、このFont-awesome cssファイルを置き換えることができます。

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>
スニペットを展開

— サニ
ソース
0 

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
スニペットを展開

— デジンタン
ソース
これでうまく機能する
— De Zin Htang
-1 
You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

<head>
    <link rel="stylesheet" href="../css/font-awesome.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>
— ロナルド・ナムワンザ
ソース
-1

ブートストラップに気をつけてください！ブートストラップは.faクラスをオーバーライドします。「レスポンシブブロックの処理にはBootstrapを使用し、アイコンにはFont-Awesomeを使用する」と考えて両方のパッケージを個別に導入する場合は、Bootstrap内の.faクラスに対処して、Font-Awesomeのスタンドに干渉しないようにする必要があります。単独での実装。

例：Bootstrapのfont-family 'FontAwesome'はFont-Awesomeのfont-family 'Font Awesome 5 Free'に干渉し、必要なアイコンの代わりに白いボックスが表示されます。

これを処理するためのよりクリーンな方法があるかもしれませんが、「ホワイトボックス」の問題を修正しようとするチェックリストを調べてもそれを理解できない場合（私がしたように）、これはあなたが探している答えである可能性がありますために。

— jtubre
ソース
なぜ投票しないのですか？それはエッジケースですが、他の場所では簡単に見つけられない原因です。
— jtubre
-1

私の場合、問題はfarフリーセットに含まれていない通常のスタイル（）を使用したことが原因でした。変更しfas、それを修正しました。

— YngveHøiseth
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.