如何将Font Awesome图标嵌入到外部css样式表中。
对于字体真棒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);
}
现在试试…
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>对于字体真棒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);
注意：对于字体真棒5免费图标，这个标签必须添加到您的外部css文件上。
现在试试吧。
为了包含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。看看官方的，关于字体的文档真棒。