将字体真棒图标嵌入到外部CSS文件中

Question

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

For Font Awesome 5＆free icon ---

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

现在尝试。

Answer 1

\\e900在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> 

Answer 2

For Font Awesome 5＆free icon ---

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文件上添加此标记。

现在尝试一下。

Answer 3

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