【字體圖標】 Font Awesome字體圖標如何使用？

一、Font Awesome官網

http://www.fontawesome.com.cn/

二、Font Awesome字體圖標使用方式

就目前知道，有三種方式如下

需要注意的是：使用這種第三方圖標，需要引入它們的樣式：<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

1. 使用預編譯class樣式

2. 使用Unicode編碼

3. 使用css樣式

2-0、在線測試

https://www.runoob.com/try/try.php?filename=tryicons_fa-ambulance

2-1、預編譯class樣式

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<i class="fa fa-ambulance"></i>
<i class="fa fa-ambulance" style="font-size:24px"></i>
<i class="fa fa-ambulance" style="font-size:36px"></i>
<i class="fa fa-ambulance" style="font-size:48px;color:red"></i>

 

 

 2-2、Unicode編碼

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<p>Unicode:</p>
<i style="font-size:24px" class="fa">&#xf0f9</i>

 

 

 2-3、css樣式

當 Font Awesome圖標默認表現樣式不能滿足需求的時候，我們可以自定義圖標的表現形式；簡單來說自定義預編譯的css樣式去表現字體圖標。

字體圖標在CSS樣式中是如此表示“\f0f9”，即“fa-ambulance” ；

在css中我們通常通過偽類":before"，":after"來表示它。

自定義預編譯樣式

<style>
    .hr.star-bright:after, hr.star-dark:after{
        content:'\f075';
        font-family:FontAwesome;
        font-size:2em;
        display:inline-block;
        position:relative;
        top:-.8em;
        padding:0 .25em;
    }
</style>

應用測試

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<i style="font-size:24px" class="hr star-bright"></i>

 

 

總結

 Font Awesome表現形式如下三種

1. css樣式“fa-ambulance” ->  unicode編碼“&#xf0f9”  ->  “content代碼：\f0f9”

2. content代碼的“\”與Unicode編碼的“&#x”是一樣的

3. 在官網我們可以查看到字體圖標的預編譯樣式和Unicode編碼， 詳情參考

　　http://www.fontawesome.com.cn/cheatsheet/

　　https://fontawesome.com/cheatsheet?from=io

 4. 參考文章：

　https://blog.csdn.net/laurel_y/article/details/70842157

　https://www.ivcxw.com/news/details/5/10.html

　https://blog.csdn.net/qq_44403367/article/details/105256831

　https://www.webuc.cn/w/soft/FontAwesome/4268.html

 

　https://www.jianshu.com/p/a6ac4ff6d0bc