Fontawesome4.7圖標依然在不斷新增中，但是Fontawesome可以預(yù)見性的遇到了拓展不足的地方。例如ICON邊緣粗細、自定義顏色等多個能夠讓WEB開發(fā)者自由裁量的選擇都受到了限制，而5.11版本起解決了這些問題。

Fontawesome5.11圖標可以根據(jù)您的需要使用任何顏色來顯示。而Font Awesome專業(yè)版更支持全新的雙色圖標。這些漂亮的圖標可以通過繼承項目的基色來實現(xiàn)開箱即用，或者根據(jù)您的需要進行自定義。

作為想嘗鮮的你肯定有了以下幾個疑問:

1. 哪兒去體驗Fontawesome5.11？

2. Fontawesome5.11與4.*版本ICON內(nèi)容有什么卻別？

3. Fontawesome5.11的是怎么引入的？

4. Fontawesome5.11如何能夠從4.*版本無縫切入？

今天板磚將來為大家逐一解答！

目前大家可以通過fontawesome各中文網(wǎng)跳轉(zhuǎn)進入5.*版本中文網(wǎng)，或者直接訪問網(wǎng)址：//fontawesome.com

從ICON獲取體驗來講，fontawesome5.*版本的中文網(wǎng)體驗極差，交互性也沒有4.*版本的強，但是畢竟是免費使用他的產(chǎn)品，大家就忍忍吧。

上圖5.*版本的資源截圖上，大家可以看到多了svgs文件夾，難道這是5.*的突破？

果然，出于完美渲染和強化變形（放大縮小）的目的，5.*版本對svg圖標進行了大范圍的升級！

好了，接下來板磚將為大家講解一下5.*版本和4.*的主要區(qū)別和引入、升級的問題！

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

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

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

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

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

接下來是萬眾期待的4.*升級5.*的時刻了，我們需要注意以下幾個方面：

1. 引入以下兩個css文件

              《link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css" 如果是直接使用5.*版本，引入這個表即可》

              《link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/v4-shims.css" 如果是4.*升級，需要再引用這個表》

總體來說小編不建議兼容的方式升級Fontawesome，建議直接刪除4.*使用5.*，因為改變并不會花費太多的精力，但是如果為了兼容就需要不斷的試錯。

更多的緣由和細節(jié)建議訪問：//fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use  學習

2. 升級后需要注意的問題：

圖標名稱變更：在5.x版本中刪除了別名。每個圖標都只有一個正式名稱，其中一些名稱已經(jīng)根據(jù)新標準和約定進行了調(diào)整。

線框圖標：同樣地，所有具有線框樣式（通常以-o結(jié)尾）的圖標現(xiàn)在都有一個far前綴，并且刪除了它們的-o后綴。

以上就是小編體驗過4.7版本升級5.11后，以及刪除4.7直接使用5.11的感受，如果能夠幫助到您，您可以將本文分享給其他web開發(fā)者。