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