将字体真棒图标嵌入到外部 css 文件答案

【问题标题】：Embed font awesome icon to external css file将字体真棒图标嵌入到外部 css 文件
【发布时间】：2018-12-26 05:56:56
【问题描述】：

如何将 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);
}

现在试试吧..

【问题讨论】：

你是如何导入字体真棒的？你能在代码 sn-p 中复制你的问题吗？
什么版本的字体很棒？
@לבנימלכה 4.3 版
@AravindS 我不知道怎么写
显示字体真棒的链接

标签： html css bootstrap-4 icons font-awesome

【解决方案1】：

为了包含 Font Awesome，您需要在 html 文件中包含 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">，然后将其用于 css。看看官方的，关于字体真棒的文档。

【讨论】：

【解决方案2】：

\e900 不存在于 font awesome 的图标中...

它适用于其他（如\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>

【讨论】：

告诉我更多帮助！

【解决方案3】：

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

border: 1px solid #F5F5F5;
border-radius: 4px;
width: 28px;
height: 28px;
font-size: 20px;



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);

注意：对于 font awesome 5 免费图标，此标签必须添加到您的外部 css 文件中。

现在试试吧。

【讨论】：