Font-Awesome 5 Icons 内容未显示

Question

我想使用 before 属性来附加一个图标，但是很少有图标没有显示出来，为什么？我有最新的字体，很棒。

.cbp-hrmenu .cbp-links li a:before {
    content: "\f101";
    display: inline;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: 0px;
    -webkit-transition: left 0.3s ease, right 0.3s ease;
    -moz-transition: left 0.3s ease, right 0.3s ease;
    -o-transition: left 0.3s ease, right 0.3s ease;
    transition: left 0.3s ease, right 0.3s ease;
}

这是一个示例，如果我使用例如 content: "\f35a" 它可以工作，或者如果我使用 I 类 (<i class="fas fa-angle-double-right"></i>)，但是当我只使用内容代码时不会显示很多图标。

.cbp-hrmenu .cbp-links li a:before {
    content: "\f101";
    display: inline;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: 0px;
    -webkit-transition: left 0.3s ease, right 0.3s ease;
    -moz-transition: left 0.3s ease, right 0.3s ease;
    -o-transition: left 0.3s ease, right 0.3s ease;
    transition: left 0.3s ease, right 0.3s ease;
}

所以我不知道为什么即使我有最新版本的 font-awesome 也没有显示某些内容...

我研究了很多，但我没有发现问题。

Answer 1

从版本 5 开始，FontAwesome 为图标提供了不同的样式（浅色、常规和纯色）。其中一些只能在 Pro 版本中访问。所以我的建议是检查以下内容：

1. 您要使用的图标是否可以在免费版中访问？
2. 如果是，是哪种风格？ （浅色、正常、实心）

如果图标只能以特定样式访问，请将以下内容添加到您的 css 类中：

对于光线：

font-weight:300;

对于常规：

font-weight:400;

对于固体：

font-weight:900;