为什么没有显示超棒字体图标? [英] Why are the font-awesome icons not showing?

问题描述

我创建了一个有角度的项目，出于美观的原因，我想使用超棒的字体图标. 我是这样安装的:

I've created an angular project and for beauty reasons i want to use font-awesome icons. I installed it like this:

npm install font-awesome

然后将其添加到我的angular.json中的javascript中:

And then added it to javascript in my angular.json:

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

已检查，路径正确(对于我的设置)

Already checked, the path is correct (for my setup)

因此，当我现在尝试添加例如加号"图标(包含在免费版本中)时，它就像一个奇怪的占位符一样显示...

So when i now try to add the "plus" icon for example (which is included in the free version) it just shows like a weird placeholder...

我添加了这样的图标:

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

希望你们能帮助我

推荐答案

尽管评论中已经回答了该问题，但这是一个简短的摘要:

Although the question has been answered already in the comments, here is a short summary:

Font Awesome有多个版本，最新版本是 5.10.2 ( ，作者仍发布了较旧版本 4.7 .0 .

Font Awesome has several versions, the newest one is 5.10.2 (relying on the GitHub repository). However, in the NPM repository the authors have still published the older version 4.7.0.

Font Awesome的基类名称已从4.x版本中的fa更改为5.x版本中的fas.并且由于文档参考的是最新版本，但是NPM软件包的版本较旧，因此您必须在所有位置将fas更改为fa.

The name of the base class for Font Awesome has changed from fa in version 4.x to fas in version 5.x. And because the documentation refers to the newest version, but the NPM package version is older, you must change fas to fa everywhere.

尽管如此，最新版本的Font Awesome也在NPM上以软件包名称

Nevertheless, the newest version of Font Awesome has been published as well at NPM under the package name @fortawesome/fontawesome-free.

这篇关于为什么没有显示超棒字体图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！