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 Awesome 5，您可以这样设置：

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

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

content: "\f21a";

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

为什么仅通过CSS会显示某些字体真棒图标？

1 个答案: