web-dev-qa-db-ja.com

フォントの素晴らしいアイコンのいくつかが表示されない理由

UIにAngular 5でfont-awesomeを使用しています。sassを使用しているため、.angular-cli.jsonをインストールした後にfont-awesomeに次の行を追加しました_

"styles": [
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "styles.scss"
      ],

アイコンの一部は次のように機能します

<i class="fa fa-money blue-text"></i>
<i class="fa fa-code blue-text"></i>

しかし、それ以上のことはありません。たとえば、これを 棒グラフのアイコン とともにfas fa-chart-barとともに使用したかったのですが、何も表示されません。 fas fa-camera-retroのようなものは、実際のアイコンではなく、奇妙な正方形としてのみ表示されます。

一部のアイコンが機能しないのはなぜですか？これらのcssクラスが、インストールしたfont-awesomeパッケージに存在するかどうかを確認する方法はありますか？

編集

node_modules\font-awesome\css\font-awesome.cssでbarチャートを検索しましたが、fa-bar-chartではなく、fa-chart-barのみが存在します。最新のフォントをインストールしたときは素晴らしい（4.7.0）。彼らのウェブサイトがfa-chart-barと言っているのはなぜですか。 fa fa-bar-chartで動作するようになりました。 faではなくfasである理由は私を超えています

htmlcssangularfont-awesome
9
ddd

Node_modules\font-awesome\css\font-awesome.cssで棒グラフを検索したところ、fa-chart-barではなくfa-bar-chartのみが存在します。最新のフォントをインストールしたときは素晴らしい（4.7.0）。彼らのウェブサイトがfa-chart-barと言っているのはなぜですか。 fa fa-bar-chartで動作するようになりました。なぜファスでファスではないのかは私を超えています

アイコンには複数のスタイルがあるため、FA5のリリースで変更されました。

  • fas：FontAwesomeソリッド
  • far：FontAwesome regular
  • fab：FontAwesomeブランド
  • fal：FontAwesomeライト

ただし、FontAwesome5 freeはほとんどのアイコンに対してのみ安定しています。完全な体験のために、あなたは FontAwesome Pro を支払う必要があります。

gallery のアイコンを選択して、どのリリースでスタイルが使用可能かを確認します。 NB：FA4-icons here 。

7
MBaas

Font Awesomeの最新バージョンにアップグレードした後、私のために働いた：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
4
jakobinn

FontAwesomeのV5リリースは使用できません。 FontAwesome 4の最新バージョンを使用するだけで動作します。このリンクを使用

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

私はこれを一度しなければなりませんでした。一部のモバイルデバイスは、フォントの1つを読み込まなかったと思います。

font-family: "Font Awesome 5 Free", "FontAwesome";
0
Kyle Lester