web-dev-qa-db-ja.com

font-awesomeアイコンはChromeに表示されません

FontawesomeアイコンがChromeに表示されないという問題に遭遇しました。 （SafariとMozはどちらも正常に動作します）。なぜこれが起こったのでしょうか？皆さんありがとう。

スナップショットは次のとおりです。

enter image description here

Fontawesome.min.cssが../ font/......が指示するデフォルトのフォントパスを知っていますが、プロジェクトのパス名を「../fonts/」に変更しましたが、まだ機能しません。アイコンは表示されません。

font-awesome
8
alex

Adblockerが無効になっているかどうかを確認してください。時々chrome拡張機能はブラウザがアイコンを表示するのを妨げる可能性があります。

8
Satyam Dahiwal

bootstrap working？Cssディレクトリが大文字であるため、cssファイルへの参照が機能しないようです。

交換してみてください

./css/font-awesome.min.css

と

./Css/font-awesome.min.css

元の質問のコメントで述べたように、CDNを一時的に使用して、アイコンが表示されるかどうかを確認できます。 CDNを使用してアイコンが表示される場合、上記のようにパスに問題があることがわかります。

CDN（バージョン3.2.1）に使用するhtmlコードは次のとおりです：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

これとは別に、古いバージョンのfont-awesomeも使用しています。可能であれば、最新バージョンにアップグレードすることをお勧めします。最新バージョンの詳細については、次のリンクをご覧ください。

http://fontawesome.io/get-started/

最新バージョンを使用する場合は、 examples を参照してください。HTMLコードの記述方法が変更されているためです。

Font-awesomeの更新後に編集：

Font-awesomeの最新バージョンを使用する場合は、HTMLコードを次のように変更する必要があります。

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

最新バージョンのCDN（4.7）：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
3
Kurt King

その理由は、index.htmlのlinkタグでawesomeフォントの正確なバージョンを提供する必要があるためです。私にとっては：

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
      crossorigin="anonymous">

https://fontawesome.com/start にアクセスして、アプリケーションで必要な正確なバージョンを検索することもできます。

0
agnes pious

複数のcssファイルが必要です。all.min.css（または）all.cssを含める必要があります。

0
Deepanshu Singh

同様の問題がありましたが、次の手順で解決しました。

  1. font-awesome.min.cssファイルを開きます
  2. webfontsを検索します。これは、フォントのデフォルトの親フォルダー名です。束を見つけたら、それぞれをプロジェクトのfontsフォルダーの名前に置き換えます。

...このように、..min.css内のフォント参照は、フォントが存在する正しいディレクトリパスを指します：）

chrome dev toolsをincognitoモードで開き、console errorsを見て、これを見つけました。

0
Rhyan Vargas