Question

我正在尝试将font awesome 5包含在运行Angular＆gt; 5.0.0的angular-cli项目（1.6.0）中。

我用过（如上所述）：

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>）

Answer 1

在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添加到您的样式中：

在styles.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的更多详细信息）

这比我想象的要简单得多。鉴于您安装了正确的模块：

...您可以将两个必需的脚本添加到.angular-cli.json中。您需要基本的fontawesome脚本，然后需要您需要的任何一个包（或全部三个）：

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

这些脚本将找到您的普通FA类，并将这些元素替换为FA图标的完整SVG版本。

将@ fortawesome / fontawesome包含在angular-cli项目中

1 个答案: