为什么font-awesome图标没有显示？

Question

为什么font-awesome图标没有显示？

3

我创建了一个Angular项目，出于美观的原因，我想使用Font Awesome图标。我是这样安装的:

npm install font-awesome

然后将它添加到我的angular.json中的javascript中：

"styles": [
  "node_modules/font-awesome/css/font-awesome.css"
]

已经检查过了，路径是正确的（适用于我的设置）

所以现在当我尝试添加“加号”图标时（它包含在免费版本中），它只会显示为奇怪的占位符...

我是这样添加图标的：

<i class="fas fa-plus-circle"></i>

希望你们能帮助我。

- niehoelzz

在angular中，我无法使FA字体始终呈现一致，直到我按照这里描述的方式切换到fa-icon组件：https://www.npmjs.com/package/@fortawesome/angular-fontawesome - The Head Rush

2

尝试使用 。 - Andrew Allen

@AndrewAllen 非常感谢，那真的有效。不过由于某些原因，实际的 Font Awesome 网站上写的是 "fas fa-plus-circle"。 - niehoelzz

@niehoelzz 是的，我只是通过试错才发现了这一点。如果有人能解释为什么 fas 版本不显示，我会很感兴趣。 - Andrew Allen

2

我认为这是一个版本问题。fa fa-plus-circle 是指 Font Awesome 3，fas fa-plus-circle 是 Font Awesome 4。您还可以考虑从 angular.json 的 "styles" 中删除 font-awesome，并在自己的样式表中 @import 它。 - Jens Alenius

2个回答

0

将 fas 更改为 fa

如果您的代码像这样  请更改为 

这是由于版本问题导致的。

- Hirusha Kumarasinghe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SparkFountain · Accepted Answer

尽管评论中已经回答了这个问题，以下是一个简短的总结：

Font Awesome 有几个版本，最新的版本是 5.15.1（基于 GitHub 存储库）。然而，在 NPM 存储库中，作者仍然发布了旧版本 4.7.0。

Font Awesome 的基础类名从 4.x 版本的 "fa" 改为 5.x 版本的 "fas"。因为文档引用的是最新版本，但 NPM 包的版本较旧，所以必须在所有地方将 "fas" 更改为 "fa"。

编辑：如我所发现，在 Font Awesome 5.x 中也有几个替代图标样式的类，比如 "far" 或 "fab"。如果有疑问，应检查每个单独图标属于哪个样式类。

然而，最新版本的Font Awesome也已经发布在NPM上，包名为@fortawesome/fontawesome-free。