html - 将字体真棒图标嵌入到外部 css 文件

Question

如何将 Font Awesome 图标嵌入到外部 css 样式表。

对于 Font Awesome 5 和免费图标---

#preview .buttons .ok {
    border: 1px solid #F5F5F5;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 20px;

}
.ok:before {
    content: "\e900";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

现在试试。。

标签： htmlcssbootstrap-4iconsfont-awesome

Answer 1

\e900字体真棒的图标中不存在...

它适用于其他（如\f2b9）

在这里查看图标并将 unicode 复制到 css：https ://fontawesome.com/icons?d=gallery

并将如下链接放入您的head标签中

#preview .buttons .ok {
    border: 1px solid #F5F5F5;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 20px;

}
.ok:before {
    content: "\f2b9";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

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


<div id='preview'>
    <div class='buttons'>
          <div class='ok'></div>
    </div>
</div>