Html 为什么一些字体很棒的图标不显示

why some of the font-awesome icons does not show

提问by ddd

I am using font-awesome with Angular 5 for my UI. Since I am using sass, I added the following line in .angular-cli.jsonafter installing font-awesome

我正在为我的 UI 使用带有 Angular 5 的 font-awesome。由于我正在使用sass，我.angular-cli.json在安装后添加了以下行font-awesome

"styles": [
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "styles.scss"
      ],

Some of the icons works such as

一些图标的作品，如

<i class="fa fa-money blue-text"></i>
<i class="fa fa-code blue-text"></i>

However a lot more does not. For example, I wanted to use this bar chart iconwith fas fa-chart-bar, but it does not show anything. Things like fas fa-camera-retroonly shows as a weird square instead of the actual icon.

然而，更多的不是。例如，我想将此条形图图标与 一起使用fas fa-chart-bar，但它没有显示任何内容。类似的东西fas fa-camera-retro只显示为一个奇怪的方块而不是实际的图标。

Why some of the icons don't work? Is there way to check if these css classes exist in the font-awesome package I installed?

为什么有些图标不起作用？有没有办法检查我安装的 font-awesome 包中是否存在这些 css 类？

EDIT

编辑

Just searched barchart in node_modules\font-awesome\css\font-awesome.cssand only fa-bar-chartexists, not fa-chart-bar. I have the latest font-awesome when I had it installed (4.7.0). Why does their website says fa-chart-bar. Just got it to work with fa fa-bar-chart. Why it is faand not fasis beyond me

刚刚在bar图表中搜索node_modules\font-awesome\css\font-awesome.css并且仅fa-bar-chart存在，而不存在fa-chart-bar。我安装了最新的 font-awesome (4.7.0)。为什么他们的网站上说fa-chart-bar。刚刚得到它的工作fa fa-bar-chart。为什么是fa和不是fas超出我的范围

采纳答案by MBaas

Just searched bar chart in node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart exists, not fa-chart-bar. I have the latest font-awesome when I had it installed (4.7.0). Why does their website says fa-chart-bar. Just got it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me

刚刚在 node_modules\font-awesome\css\font-awesome.css 中搜索条形图，只有 fa-bar-chart 存在，不存在 fa-chart-bar。我安装了最新的 font-awesome (4.7.0)。为什么他们的网站上写着 fa-chart-bar。刚刚让它与 fa fa-bar-chart 一起使用。为什么它是 fa 而不是 fas 超出我的范围

That was changed with the release of FA5, because now there are multiple styles for the icons:

随着 FA5 的发布，这种情况发生了变化，因为现在图标有多种样式：

• fas: FontAwesome solid
• far: FontAwesome regular
• fab: FontAwesome brands
• fal: FontAwesome light

• fas: FontAwesome 固体
• far: FontAwesome 常规
• fab: FontAwesome 品牌
• fal: FontAwesome 灯

However, FontAwesome5 free has solid only for most icons. For the full experience, you'd have to pay for FontAwesome Pro.

但是，FontAwesome5 free 仅对大多数图标具有solid。要获得完整的体验，您必须为FontAwesome Pro付费。

Select any icon in the gallery, to see wich styles are available for it in which release. NB: FA4-icons here.

选择库中的任何图标，以查看在哪个版本中可用的样式。注意：此处为FA4 图标。

回答by jakobinn

Worked for me after upgrading to the latest version of Font Awesome:

升级到最新版本的 Font Awesome 后为我工作：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

回答by Kyle Lester

I had to do this one time. I think some mobile devices didn't load one of the fonts:

我不得不这样做一次。我认为某些移动设备没有加载其中一种字体：

font-family: "Font Awesome 5 Free", "FontAwesome";

回答by Sébastien Gicquel

I had the same issue. The search page for icons I found with Google was outdated. Make sure you are searching on the last version of the site.

我遇到过同样的问题。我在 Google 上找到的图标搜索页面已经过时。确保您正在搜索网站的最新版本。

Like you, I found this icon :

和你一样，我发现了这个图标：

<i class="fa fa-line-chart"></I>

It was not working. If you search on the website, you will see it is :

它不起作用。如果你在网站上搜索，你会看到它是：

<i class="fas fa-chart-line"></i>

回答by Sampad

You may not use the V5-release of FontAwesome. Just use the latest version of FontAwesome 4, it should work. Use this link

您不能使用 FontAwesome 的 V5 版本。只需使用最新版本的 FontAwesome 4，它应该可以工作。使用此链接

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">