web-dev-qa-db-ja.com

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

私はAngular 4を開発環境（localhost）で使用しています。npmを介して素晴らしいフォントをインストールし、追加しました：

"./node_modules/font-awesome/css/font-awesome.css",

私のスタイルスクリプトに。

ブラウザでアイコンを確認すると、すべて問題ありません。

screenshot

しかし、私のアイコンはページには表示されず、空の四角形だけが表示されます。何が悪いのですか？

javascriptangularfont-awesome
8
Milos

その作業コード：

npm install font-awesome --save

.angular-cli.jsonにfont-awesomeリンクを追加します。

"../node_modules/font-awesome/css/font-awesome.css"

htmlファイル

<i class="fa fa-cog fa-spin"></i>
5
Chandru

私の場合、サーバーを再起動する必要がありました。サーバーが実行されているcliで、ctrl+cを押してサーバーを閉じ、ng serve --openまたはng serveを実行した後、サーバーを再度開きます。

1
distorsium

次のコードをpackage.jsonに追加してください

 "dependencies": {
     "font-awesome": "^4.7.0", // here I am saying use version 4.7 and above
}

angular CLIを使用していない場合は、フォントの色を確認してください。フォントがロードされているのに表示されません。

1
HD..

index.htmlまたはangular.cliでfont-awesome cssおよびjsファイルをリンクします

Index.html

<!-- Custom Fonts -->


 <link href="your node font awesome location" rel="stylesheet" type="text/css">

angular-cli：

"styles": ['your node font awesome location']
0
Shanmugapriya D

無料版をご利用の場合。これを試して..

最初にfortawesomeレジストリとauthTokenを削除します

npm config delete "@fortawesome:registry"
npm config delete "//npm.fontawesome.com/:_authToken"

次にパッケージをインストールします

npm install --save-dev @fortawesome/fontawesome-free

パッケージをインストールしたら、angular.jsonファイルに以下のコードを追加します

   ......      
    "styles": [
    ......
    "node_modules/@fortawesome/fontawesome-free/css/all.css"
    ],
    "scripts": [
    ....
    "node_modules/@fortawesome/fontawesome-free/js/all.js"
    ],
    .....

注：それらのブロック（スタイル/スクリプト）は2回ありました。 両方に追加

0
Nithin mm

上記のいずれのヒントも機能しない場合は、最新のヒントをアンインストールして、4番目のバージョンのfontawesomeをインストールしてください。 https://fontawesome.com/v4.7.0/icon/trash

0
Ab Wahab Achakzai