13

Angular > 5.0.0 を実行している angular-cli プロジェクト (1.6.0) に font awesome 5 を含めようとしています。

私は（説明したように）使用しました：

yarn config set @fortawesome:registry https://npm.fontawesome.com/xxxxx-xxxx-xxx-xxx-xxxxxxx
yarn add @fortawesome/fontawesome
yarn add @fortawesome/fontawesome-pro-light

パッケージを正常に取得します。ここで、angular-cli にパッケージを含めたいと思います。私app.component.tsはやろうとしました（https://www.npmjs.com/package/@fortawesome/fontawesomeで説明されているように）：

import  fontawesome  from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome-pro-light'

しかし、タイプスクリプトのスローとエラー:

ERROR in src/app/app.component.ts(2,9): error TS1192: Module '"xxx/node_modules/@fortawesome/fontawesome/index"' has no default export.

Font Awesome 4 では、.css ファイルを「styles」配列に含めました。しかし、Font Awesome 5 には、すべての css を含む css ファイルがありません。これは単なる .js ファイルの集まりです。

Angular CLI プロジェクトに Font Awesome 5 を適切に含めるにはどうすればよいですか? (たとえば<i class="fal fal-user"></i>、マークアップで使用できるようにしたい)

4

1 に答える 1

28

Font Awesome 5 では、FA4 のようにフォントベースのアイコンを使用したり、新しい SVG ベースのアイコンを使用したりできます。angular-cli を使用して SVG ベースを構成することをまだ検討していますが、フォントベースの場合は次のことができます。

FontAwesome を .angular-cli.json に追加します。

FA スタイルを CSS または SCSS として含めます。

  "styles": [
    "styles.scss"
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css",
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
    "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
  ],

または、FontAwesome をスタイルに直接追加します。

style.css または styles.scss にスタイルを含めます。

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss";

または、FontAwesome を CSS としてスタイルに直接追加します。

@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css";
@import "../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css";

FA SCSS を変更/拡張する必要がない場合は、おそらく最初の方法を使用するのが最も簡単です。構成の一部になるだけです。

SVGについて

これにはFA JavaScriptファイルを含める必要があると思われますが、まだ詳しくは調べていません. 完了すると、おそらく上記と非常によく似ています。

SVG Redux

（SVGの詳細を追加するために編集されました）

思ったよりずっと簡単です。適切なモジュールがインストールされている場合:

...必要な 2 つのスクリプトを .angular-cli.json に追加するだけです。基本の fontawesome スクリプトと、必要なパック (または 3 つすべて) が必要です。

  "scripts": [
    "../node_modules/@fortawesome/fontawesome/index.js",
    "../node_modules/@fortawesome/fontawesome-free-solid/index.js"
  ],

これらのスクリプトは、通常の FA クラスを見つけて、要素を完全な SVG バージョンの FA アイコンに置き換えます。

于 2018-01-10T17:00:23.537 に答える