web-dev-qa-db-ja.com

Angular4プロジェクトでフォントの素晴らしいアイコンが読み込まれない

私はangular 4 font-awesomeを使用したプロジェクトに取り組んでいます。このガイドに従ってnpmでライブラリをインストールしました： font-awesomeをAngular 2 + CLIプロジェクト

ng-serveコマンドを使用してscssスタイルシートをコンパイルするようにプロジェクトを構成しました。angular-cli.jsonのスタイルパスは次のようになります。

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

      ],

アドレスカードのアイコンが付いたボタンを作成したいのですが、Bootstrap 4も使用しているので、次のようになります。

<button class="btn btn-sm btn-primary"><span class="fas fa-address-card"></span></button>

しかし、読み込まれると、次のようになります。

angularfont-awesome
5
Carlos Pisarello

Fasではなくfaクラスを使用する必要があります。 faクラスはfont-faceを設定します。 （@ mike-hillへのヒント）

ソースを表示 http://fontawesome.io/icon/address-card/

23
Andy Roberts

まず、angular.jasonのstyle []に​​含めるか、次のようにインポートするだけで、フォントの素晴らしいアイコンを使用するためのプロジェクト要件を適切に設定していることを確認します。

@import "~font-awesome/css/font-awesome.css";

コンポーネントのcssファイル内。次に、font-iconsマークアップが提供するものに加えて、「fa」クラスが必要です。または、次のようにすることもできます。

<div class="fa">
<i class="whateverTheIconClassYouWant"></i>
</div>

Class = "fa"を使用してdiv内に直接、フォントのすばらしいWebサイトで提供されているコードをコピーして貼り付けることができます。

お役に立てれば！ハッピーコーディング!!!!

2
Deekshith Anand

Angular.jsonまたはAngular-cli.jsonに依存関係を追加した後。 1）アプリの実行を停止します2）それを開始します新しいリソースを認識します

1
Hojjatollah Bakhtiyari Kiya