ng build 后，字体真棒字体未在 Angular 中加载

Question

我正在使用 Angular 8。我已经像这样在 angular.json 中添加了很棒的字体路径。

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

但是，所有图标都以空框的形式出现（未加载）。所以，我把所有字体很棒的文件放在 assets 文件夹中。然后，我在 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 文件有一个指向“../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;
}

所以，我点击了那个链接。

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

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

Answer 1

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

1. npm install font-awesome --save
2. 在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!?
      ],
      ...
  }
  ]
],

在更新的 Angular 版本中，使用 angular.json 文件 相反，没有../。例如，使用 "node_modules/font-awesome/css/font-awesome.css"

1. 在任何你想要的 html 文件中放置一些字体很棒的图标：

2. 停止应用程序 Ctrl + c 然后使用 ng serve 重新运行应用程序，因为观察者仅用于 src 文件夹，angular-cli.json 是未观察到变化。

3. 享受您的超棒图标！