請點擊進入Fontawasome5.x 圖標查詢頁面

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

使用Fontawasome這一字體圖標的好處是：

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

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

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

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

比如導航上，根據(jù)我們的行業(yè)特點，給每個導航項目加入圖標：

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

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

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

---

Fontawasome4.7升級Fontawasome5.x的注意事項以及引用方式

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

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

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

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

示例使用：

比如我們查詢到下面的動物實心圖標：

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

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

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

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

<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的粗細自定義，以及放大倍數(shù)有了新的選擇：

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

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

總結(jié)

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

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