css 中定义的超赞字体图标

Question

我正在使用 Font Awesome Free 5.5.0 并在 css 中定义图标，就像这样。

.nav-side-menu li :not(collapsed) .arrow:before {
    content: "\f007";
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    float: right;
}

它工作正常，但只适用于几个图标。我需要使用 this one，代码 "f107"。但是这段代码不起作用。我什至可以在项目中的链接 font-awesom 文件中找到此代码，其名称与文档中的 class 相同，但是当我在 css 中使用它时，没有任何反应。

Answer 1

您不需要在 CSS 文件中专门定义图标。
如果你加载了 font-awesome，它应该已经可用了。
你试过了吗<i class="fas fa-angle-down" />？

此处演示fiddle

Answer 2

使用这个 css 会很好。我们必须设置字体粗细来定义实心图标。

.nav-side-menu li :not(collapsed) .arrow:before {
    content: "\f007";
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    float: right;
    font-weight: 900;
}

css 中定义的超赞字体图标

Font awesome icon defined in css

css

font-awesome-5