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

Question

我正在为我的 UI 使用 Angular 5 的超棒字体。因为我使用的是 sass，所以我在安装 font-awesome

后在 .angular-cli.json 中添加了以下行

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

一些图标可以工作，例如

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

但是更多的不是。例如，我想使用这个 bar chart icon使用 fas fa-chart-bar，但它不显示任何内容。 fas fa-camera-retro 之类的东西只显示为一个奇怪的方 block ，而不是实际的图标。

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

编辑

刚刚在 node_modules\font-awesome\css\font-awesome.css 中搜索了 bar 图表，只有 fa-bar-chart 存在，而不是 fa-chart-bar。当我安装它时，我有最新的 font-awesome (4.7.0)。为什么他们的网站显示 fa-chart-bar。刚刚让它与 fa fa-bar-chart 一起使用。为什么它是 fa 而不是 fas 我无法理解

Answer 1

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

FA5 的发布改变了这一点，因为现在图标有多种样式:

• fas:FontAwesome solid
• far:FontAwesome 常规
• fab:FontAwesome 品牌
• fal: FontAwesome light

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

选择 gallery 中的任意图标, 以查看在哪个版本中可用的样式。注意:FA4-图标 here .