Font Awesome 字体在构建后 Angular 中未加载

Question

我正在使用 Angular 8. 我在 angular.json 中添加了 font-awesome 路径，就像这样。

"./node_modules/font-awesome/css/font-awesome.css"

但是，所有图标都是空框（未加载）。所以，我将所有超棒的字体文件放在资产文件夹中。然后，我将 link 放入 index.html

中的 css 文件

  <link rel="stylesheet" href="assets/styles/css/font-awesome.css">

还是不行。所以，我直接从浏览器中点击 font-awesome.css 文件。

mysite.mymy/assets/styles/css/font-awesome.css

它确实在浏览器中打开了。 css 文件有一个 link 到“../fonts/”。如下所示：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

所以，我击中了 link。

mysite.mymy/assets/styles/fonts/fontawesome-webfont.eot?v=4.7.0

但是它正在重定向到主页。有什么问题？图标未加载。

Answer 1

在 Angular 2.0 最终版本之后，Angular2 CLI 项目的结构已更改 — 您不需要任何供应商文件，不需要 system.js — 只有 webpack。所以你这样做：

npm install font-awesome --save
在 angular-cli.json 文件中找到 styles[] 数组并在此处添加 font-awesome 引用目录，如下所示：

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      ....
      "styles": [
          "styles.css",
          "../node_modules/bootstrap/dist/css/bootstrap.css",
          "../node_modules/font-awesome/css/font-awesome.css" // -here ebpack will 
   automatically build a link css element out of this!?
      ],
      ...
  }
  ]
],

In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css"

在您想要的任何 html 文件中放置一些超棒的字体图标：
停止应用程序 Ctrl + c 然后重新运行应用程序使用 ng serve 因为观察者只针对 src 文件夹并且 angular-cli.json 没有观察到变化。
欣赏你超棒的图标！

Font Awesome 字体在构建后 Angular 中未加载

Font Awesome fonts not loading in Angular afte ng build

css

font-awesome

angular

ng-build