为什么只有某些字体很棒的图标通过 css 出现？

Question

我正在尝试将 FontAwesome 图标应用到复选框，但只有某些图标出现而其他图标不出现。

我要出现的图标是飞船图标。我可以使用 <i class="fas fa-ship"></i> 使其在 div 中工作，但是当试图通过 CSS 使其出现时它没有显示 - 但其他图标显示。

不工作

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

input[type=radio].with-font,
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

input[type=radio].with-font ~ label:before,
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f042";
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;
}

工作（飞机）

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);

input[type=radio].with-font,
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

input[type=radio].with-font ~ label:before,
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f072";
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;
}

我确实验证了飞船图标是一个免费图标，所以不确定为什么它不能通过 CSS 工作。

Answer 1

设置 font-family 和 font-weight 将解决您的问题，对于 Font Awesome 5，您可以这样设置：

font-family: "Font Awesome 5 Free";
font-weight: 900;

您还使用了错误的 Unicode，它是：

content: "\f21a";

此处示例：https://codepen.io/anon/pen/ZdgLZx

为什么只有某些字体很棒的图标通过 css 出现？

Why are only certain font awesome icons appearing via css?

css

font-awesome

font-awesome-5