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

Posted 2023-03-15

【中文标题】ng build 后，字体真棒字体未在 Angular 中加载

【英文标题】：Font Awesome fonts not loading in Angular afte ng build

【发布时间】：2020-08-01 21:04:39

【问题描述】：

我正在使用 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

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

【问题讨论】：

你使用 ng build --prod 吗？当它在节点模块中时，当您在开发者控制台中检查 emty 框时，您会在那里看到任何字体很棒的 css 吗？

只有 ng 构建。是的，当我检查空盒子时，字体很棒的 css 即将到来。

【参考方案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!?
      ],
      ...
  
  ]
],

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

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

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

享受您的超棒图标！

【讨论】：

我也把它放在了 angular.json 中。我专门将它复制到资产中，因为它不起作用