我正在开发环境 (localhost) 中使用 Angular 4。我通过 npm 安装了很棒的字体并添加了：
"./node_modules/font-awesome/css/font-awesome.css",
到我的样式脚本。
当我在浏览器中查看我的图标时，一切正常：
但我的图标没有出现在页面上，只是一个空方块。我做错了什么？
【问题讨论】：
标签： javascript angular font-awesome
它的工作代码：
npm install font-awesome --save
在 .angular-cli.json 中添加 font-awesome 链接：
"../node_modules/font-awesome/css/font-awesome.css"
在 html 文件中
<i class="fa fa-cog fa-spin"></i>
【讨论】：
如果您使用的是免费版本。试试这个..
首先删除fortawesome registry & authToken
npm config delete "@fortawesome:registry"
npm config delete "//npm.fontawesome.com/:_authToken"
然后安装包
npm install --save-dev @fortawesome/fontawesome-free
安装包后，在你的 angular.json 文件中添加以下代码
......
"styles": [
......
"node_modules/@fortawesome/fontawesome-free/css/all.css"
],
"scripts": [
....
"node_modules/@fortawesome/fontawesome-free/js/all.js"
],
.....
注意：这些块中有两次（样式/脚本）。 同时添加
【讨论】：
我曾尝试在 angular.json 中包含 font-awesome CSS 和 js，但它不起作用。 Font-Awesome 团队为 Angular 制作了一个很棒的字体组件，可供所有想要在 Angular 项目中集成图标的人使用。在为 font-awesome 安装官方的 Angular 组件之前，我们必须检查兼容性。对于 Angular 10，我们必须为 angular 安装 0.7.x 版本的 font-awesome 组件。
$ npm install @fortawesome/angular-fontawesome@<version>
字体 Awesome 中的图标被分成不同的包，这样我们就可以只为我们的项目安装所需的图标。这有助于减小 font-awesome 包的大小。
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save fortawesome/free-regular-svg-icons
$ npm i --save @fortawesome/free-solid-svg-icons
我们不需要在 angular.json 的样式和脚本中包含任何内容。要在 Angular 中运行和使用 font-awesome，我们必须在 app.module.ts 文件中导入 FontAwesomeModule。我们可以在 Angular 组件模板中直接使用 font-awesome。
<fa-icon [icon]="['fas', 'sun']"></fa-icon>
<fa-icon [icon]="['far', 'sun']" ></fa-icon>
<fa-icon [icon]="['fab', 'facebook']"></fa-icon>
例如 angular 中 font-awesome 的配置。检查这篇文章。 https://edupala.com/angular-font-awesome/
【讨论】：
就我而言，我不得不重新启动服务器。在运行服务器的 cli 中，按 ctrl+c 关闭服务器，然后运行 ng serve --open 或 ng serve 再次打开服务器。
【讨论】：
在 index.html 或 angular.cli 中链接你的字体很棒的 css 和 js 文件
索引.html
<!-- Custom Fonts -->
<link href="your node font awesome location" rel="stylesheet" type="text/css">
角度-cli：
"styles": ['your node font awesome location']
【讨论】：
请将以下代码添加到您的 package.json 中
"dependencies": {
"font-awesome": "^4.7.0", // here I am saying use version 4.7 and above
}
如果您没有使用 angular CLI，在您的情况下交叉检查 font-color 我已经看到字体已加载但未出现
【讨论】：
如果上述提示均无效，请卸载最新的并安装第 4 版 fontawesome，您就可以开始了。 https://fontawesome.com/v4.7.0/icon/trash
【讨论】：