請點(diǎn)擊進(jìn)入Fontawasome5.x 圖標(biāo)查詢頁面

進(jìn)入之后可見所有圖標(biāo)，右側(cè)下方可選各個分類的圖標(biāo)，可根據(jù)自身要求連續(xù)選擇所需的分類。

使用Fontawasome這一字體圖標(biāo)的好處是：

• 不管在什么設(shè)備上，總能最精細(xì)的顯示出來，而不會失真。
• 只需要輸入一個圖標(biāo)的名稱，即可在網(wǎng)頁上顯示想要的圖標(biāo)
• 顏色可以隨意更改，相比圖片而言，字體圖標(biāo)有更多的靈活的樣式
• 可以輕松的制作優(yōu)美的動態(tài)圖標(biāo)，比如旋轉(zhuǎn)，縮放，都可以輕松實(shí)現(xiàn)。

之前我們在開發(fā)過程中使用的是Fontawasome4.7版本，最近Fontawasome5已經(jīng)趨于成熟，并且有了完全壓倒性優(yōu)勢。

Fontawasome 5版本增加了除網(wǎng)頁常用圖標(biāo)外的更多分類和可應(yīng)用于更多行業(yè)的圖標(biāo)：

如上圖所示，我們可以根據(jù)需要，去切換各個分類找到適合于我們的圖標(biāo)了。

比如導(dǎo)航上，根據(jù)我們的行業(yè)特點(diǎn)，給每個導(dǎo)航項(xiàng)目加入圖標(biāo)：

在圖標(biāo)應(yīng)用上加入更多的元素和表現(xiàn)方法：

或者在文章內(nèi)插入圖標(biāo)：

精彩的圖標(biāo)可以輕松的引用到網(wǎng)站的各個方面，并且在任意設(shè)備上可以保證最精致的狀態(tài)，而不會失真。

---

Fontawasome4.7升級Fontawasome5.x的注意事項(xiàng)以及引用方式

Fontawasome4.7 版本的引用是 使用前綴 fa

比如 首頁一般我們會加入一個小房子的圖標(biāo)，那么引用方式是? fa fa-home

這是Fontawasome4.7所有圖標(biāo)通用使用方式，而在Fontawasome5.x版本中（免費(fèi)），分為三種不同類別的圖標(biāo)

1. 前綴 fas 實(shí)心圖標(biāo)，這個前綴是使用的最多的，也是5.0版本中圖標(biāo)數(shù)量最多的
2. 前綴fab 品牌圖標(biāo)，這個前綴是引用品牌logo的，我們一般用于客服選項(xiàng) 比如QQ客服、微信客服等等，或者其他品牌內(nèi)容中
3. 前綴fas 線性圖標(biāo)，這個圖標(biāo)相對較少，是區(qū)別于實(shí)心圖標(biāo)的線性風(fēng)格圖標(biāo)。

示例使用：

比如我們查詢到下面的動物實(shí)心圖標(biāo)：

他的名稱是cat? 那么我們在引用時? 輸入? fas fa-cat? 的css類 即可引用到這個圖標(biāo)。

Fontawesome5.* 與4.*相比主要多了以下特征：

1. 新增了實(shí)心(fas)、常規(guī)(far)和品牌(fab)三種模式，也就是說有一部分icon的引入要從以前的“fa fa-x”變更至“fas fa-x”，例如引入微信圖標(biāo)，4.*版本引入方式為“fa fa-weixin”，到了5.*版本就應(yīng)該寫為"fab fa-weixin"，這個原生的寫法，如果想獲得兼容，接下來會詳細(xì)講解。

如果是引用了5.11版本，使用以下方式引用圖標(biāo)顯示的是一個方框

<i class="fa fa-500px"></i>
<i class="fa fa-amazon"></i>
<i class="fa fa-qq"></i>

此時就需要修改為

<i class="fab fa-500px"></i>
<i class="fab fa-amazon"></i>
<i class="fab fa-qq"></i>

2. 5.*版本后支持對icon的粗細(xì)自定義，以及放大倍數(shù)有了新的選擇：

3. 在專業(yè)版（付費(fèi)版750RMB）中可以獲得更多的自定義權(quán)限

4. 5.*版本新增了emoj圖標(biāo)和很多的品牌圖標(biāo)，對于UI有更多素材要求的用戶的確是個好事兒。

總結(jié)

以上是生活随笔為你收集整理的FontAwesome5.11 与4.7的区别 5.x版本图标显示方框的原因的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。