簡(jiǎn)介Font Awesome 4.6.3 是一套面向 Web 前端開(kāi)發(fā)與界面設(shè)計(jì)的成熟圖標(biāo)庫(kù)資源包適用于需要在網(wǎng)站或應(yīng)用中快速引入矢量圖標(biāo)的開(kāi)發(fā)者與設(shè)計(jì)師。相比圖片圖標(biāo)它基于字體技術(shù)實(shí)現(xiàn)可通過(guò) CSS 調(diào)整大小、顏色、旋轉(zhuǎn)與動(dòng)畫(huà)也能在響應(yīng)式布局中保持清晰同時(shí)兼容 IE9 及以上與 Chrome、Firefox、Edge 等主流瀏覽器。資源包共 37 個(gè)文件約 587KB核心包含 font-awesome.css 與壓縮版 min.css 樣式文件以及 eot、ttf、woff、woff2、otf、svg 等多種字體格式還附有 less 和 scss 源碼便于使用預(yù)處理器按需定制圖標(biāo)變量與樣式。目前已有 796 人學(xué)習(xí)/下載該版本發(fā)布于 2016 年穩(wěn)定且仍能滿足多數(shù)常規(guī)項(xiàng)目需求。解壓后可直接引入 css 與 fonts 目錄投入項(xiàng)目也可閱讀 HELP-US-OUT.txt 了解使用說(shuō)明借助 fa 系列類名可實(shí)現(xiàn)堆疊、旋轉(zhuǎn)、翻轉(zhuǎn)、脈沖等常見(jiàn)交互效果適合快速原型、后臺(tái)管理系統(tǒng)與門(mén)戶網(wǎng)站的統(tǒng)一圖標(biāo)方案。1. 還在用 Font Awesome 4.6.3這份資源包可能是老項(xiàng)目最后的安全網(wǎng)Font Awesome 4.6.3 這個(gè)版本號(hào)對(duì) 2020 年以后入行的前端來(lái)說(shuō)已經(jīng)非常陌生但對(duì)接手過(guò) 2016 到 2019 年間上線后臺(tái)系統(tǒng)的人而言它幾乎是繞不開(kāi)的歷史包袱老項(xiàng)目的按鈕、菜單、表格操作列里到處都是fa fa-*類名一旦圖標(biāo)字體加載失敗整個(gè)界面的功能入口就變成一片方框。這個(gè)資源包解決的核心問(wèn)題不是去哪里下載一個(gè)舊版圖標(biāo)庫(kù)而是如何在離線環(huán)境、內(nèi)網(wǎng)部署、無(wú)兼容風(fēng)險(xiǎn)的條件下把這套停止維護(hù)的圖標(biāo)資源穩(wěn)定地固定下來(lái)。它適合三類人剛接手老系統(tǒng)正在為圖標(biāo)方框發(fā)愁的開(kāi)發(fā)者、部署環(huán)境無(wú)法訪問(wèn)外網(wǎng)的工程師、以及想搞清楚圖標(biāo)字體加載原理的學(xué)習(xí)者。2. 為什么 4.6.3 還在被大量項(xiàng)目使用和 5.x/6.x 的代際差異2.1 類名前綴是遷移最大的成本fa 與 fas/far 的兼容斷層Font Awesome 4 的類名體系是fa fa-圖標(biāo)名比如fa fa-user、fa fa-trash。從 5.0 開(kāi)始官方把命名體系拆成了fas、far、fab等多個(gè)前綴用來(lái)區(qū)分實(shí)心、規(guī)則、品牌等不同風(fēng)格圖標(biāo)名本身也有一部分發(fā)生了重命名。這意味著一個(gè)老項(xiàng)目里如果有一百個(gè)模板文件、上千處fa fa-xxx寫(xiě)死的類名升級(jí)到 5.x 不是改一個(gè) CSS 引用路徑那么簡(jiǎn)單而是要逐個(gè)排查每個(gè)圖標(biāo)在新版本里是否還存在、類名是否兼容。我一般會(huì)在接手這類項(xiàng)目時(shí)先做一個(gè)成本估算用腳本遍歷前端模板和 JS 動(dòng)態(tài)生成類名的位置把出現(xiàn)的fa fa-xxx類名去重再對(duì)比 5.x 的圖標(biāo)映射表。如果去重后只有二三十個(gè)圖標(biāo)遷移成本可控如果幾百個(gè)那就基本告別短期遷移了。4.6.3 全部圖標(biāo)數(shù)量在六百多個(gè)老項(xiàng)目實(shí)際用到的可能只是其中一部分但因?yàn)轭惷稚⒃诖罅宽?yè)面里人工替換的風(fēng)險(xiǎn)遠(yuǎn)高于把 4.6.3 資源包原樣鎖進(jìn)項(xiàng)目。另外要注意一個(gè)細(xì)節(jié)4.x 時(shí)代很多后端渲染模板比如某種服務(wù)端模板引擎會(huì)把圖標(biāo)類名拼接在字符串里fa fa-${item.type}這種模式非常普遍運(yùn)行時(shí)才確定類名。這種動(dòng)態(tài)類名在遷移時(shí)最難處理靜態(tài)替換腳本覆蓋不到運(yùn)行時(shí)又可能計(jì)算出已經(jīng)不存在的圖標(biāo)名。相比之下讓 4.6.3 繼續(xù)跑反而是投入產(chǎn)出比最高的選擇。2.2 css、less、scss 三種源文件的選型邏輯Font Awesome 4.6.3 發(fā)布包內(nèi)提供了三套源文件css/、less/、scss/。三者的差異不只在于文件后綴而是面向三種不同的使用方式。css/目錄里是編譯好的成品引入即用。如果你只是要把圖標(biāo)庫(kù)放進(jìn)一個(gè)沒(méi)有構(gòu)建流程的純靜態(tài)頁(yè)面或者公司內(nèi)部的 CMS 模板系統(tǒng)直接引用css/font-awesome.min.css就好。這個(gè)目錄下的 CSS 不需要任何預(yù)處理器參與也最容易排查問(wèn)題。less/和scss/目錄里是源文件變量和 mixin 是分開(kāi)寫(xiě)的。比如fa-css-prefix、fa-font-path這些變量允許你通過(guò)修改變量來(lái)改變類名前綴和字體文件路徑。如果項(xiàng)目本身就在用 less 或 scss 做樣式管本文還有配套的精品資源點(diǎn)擊獲取