web-dev-qa-db-ja.com

ng-cli 6とfont awesomeアイコンが機能しない

私はfont-awesome 4.70、angular 6.0.8、およびcli 6.0.8を使用しています（フルバージョンは下記））既存のWebpackプロセスをcliの「ngビルド」で置き換えようとしています。 font awesomeのアイコンが表示されないという問題が発生しました。以前のバージョンでも同様の問題が発生しましたが、まだ解決策を見つけていません。

フォントをアセットに接続しています

assets:[
    "./node_modules/font-awesome/fonts",
    //other assets
]

そして、私はCSSを私のangula.jsonのstyles部分に含めています

styles:[
    "./node_modules/font-awesome/css/font-awesome.css",
    //other styles
]

私は「ng serve」を使用していません。コードをトランスパイルするためにbuildコマンドのみを使用しています。ブラウザでこれらのエラーが発生します。

GET http：// localhost：29380/fontawesome-webfont.woff2？v = 4.7. 404（見つかりません）

GET http：// localhost：29380/fontawesome-webfont.woff？v = 4.7. 404（見つかりません）

GET http：// localhost：29380/fontawesome-webfont.ttf？v = 4.7. 404（見つかりません）

出力ディレクトリにアセストが表示されますが、なんらかの理由で使用できず、404が返されます。

enter image description here

angularfont-awesomeangular-cli-v6
5
Jake

私もこの問題を経験し、次のように決定しました。 angular.jsonファイルのbuild> assetsセクションに、コピーするフォントのパスを含めました。

{
     "glob": "**/*",
     "input": "node_modules/font-awesome/fonts",
     "output": "assets/fonts"
}

そしてbuild> stylesセクションで、node_modulesフォルダーにfont-awesomeパスを含めました：

{
    "input": "node_modules/font-awesome/scss/font-awesome.scss"
}

そして最後に、グローバルなscssスタイルのファイルに次の指示を含めました。

$fa-font-path: "../assets/fonts" !default;
i[class^="fa-"], ion-icon[class^="fa-"] {
    font-family: "FontAwesome" !important;
}

Ionicを使用している場合に備えて、グローバルなscssスタイルのファイルにion-iconも含めていることに注意してください。

これで問題が解決することを願っています。

1
Walter Gandarella

同じ問題があり、指示に従ってください!!できます、

ステップ1：fortawesome：registryとauthTokenを削除します（ある場合）

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

ステップ2：

パッケージをインストールする必要がある後

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

ステップ3：

あなたのangular.jsonに追加

"node_modules/@fontawesome/fontawesome-free/js/all.js"
"node_modules/@fontawesome/fontawesome-free/css/all.css"

右側のブロックにjsおよびcssファイルを追加（スクリプト/スタイル）

注：テストとビルドブロックの両方に追加してください

0
Nithin mm

まず、素晴らしいフォントをインストールします

npm install font-awesome

次に追加します

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

styles.cssファイル内。

0
Sherlock