Question

我在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"
      ],

有些图标可以使用，例如

<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这样的东西只显示为一个奇怪的方块，而不是实际的图标。

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

修改

刚刚在bar中搜索了node_modules\font-awesome\css\font-awesome.css图表，只有fa-bar-chart存在，而不是fa-chart-bar。我安装它时有最新的字体 - 很棒（4.7.0）。为什么他们的网站会说fa-chart-bar。刚刚与fa fa-bar-chart合作。为什么fa而不是fas超出我的范围

Answer 1

刚搜索过的条形图 node_modules \ font-awesome \ css \ font-awesome.css和fa-bar-chart 存在，而不是fa-chart-bar。当我拥有它时，我有最新的字体 - 真棒安装（4.7.0）。他们的网站为什么说fa-chart-bar。得到了它与fa fa-bar-chart一起使用。为什么它是fa而不是fas超出我的范围

随着FA5的发布改变了，因为现在图标有多种样式：

fas：FontAwesome solid
far：FontAwesome regular
fab：FontAwesome品牌
fal：FontAwesome light

然而，FontAwesome5免费仅适用于大多数图标。要获得完整体验，您必须支付FontAwesome Pro。

选择gallery中的任何图标，以查看哪个版本可用于哪个版本。 NB：FA4-icons here。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

对我有用的语法是 fas fa-chart-bar https://fontawesome.com/icons/chart-bar?style=solid

这是以下版本： bootstrap/4.4.1/css/bootstrap.min.css font-awesome/4.7.0/css/font-awesome.min.css

Answer 6

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

像你一样，我找到了这个图标：

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

它不起作用。如果您在website上进行搜索，则会看到它是：

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

为什么一些字体很棒的图标没有显示

修改

6 个答案: