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

Question

我正在尝试将 font awesome 5 添加到我的 angular-cli 项目 (1.6.0) 运行 Angular >5.0.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";

如果您不需要modify/enhance 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 项目

Include @fortawesome/fontawesome to angular-cli project

font-awesome

angular-cli

font-awesome-5

angular

angular-fontawesome