[英]Embed font awesome icon to external css file
如何將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);
}
現在嘗試。
\\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>
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文件上添加此標記。
現在嘗試一下。
為了包括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。 看一下有關字體真棒的官方文檔。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.