icoMoon官網 - Icon Font & SVG Icon Sets ? IcoMoon

圖標下載

官網首頁導航欄

官網首頁 - 頂部導航欄 - IcoMoon App

點擊后進入圖標選擇界面

若從零開始選擇圖標

圖標選擇頁面

①點選自己需要的圖標，選中的圖標背景變白

②頁面底部Selection后的括號內顯示當前已選的圖標數量

③icoMoon提供免費圖標庫與不同收費標準的圖標庫

④icoMoon支持從本地導入圖標

⑤icoMoon支持導出svg與png格式圖標

若需要更新已有圖標

已有的icomoon文件夾

將本地icomoon文件夾中的selection .json文件拖入頁面中淡紫色區域

頁面提示

頁面提示：是否導入文件中的所有設置 可視實際情況進行選擇 隨后頁面更新，顯示

點選或反選相應圖標以更新selection

完成圖標選擇，開始下載

點擊Generate Font開始下載

點擊Generate Font，等待界面跳轉

跳轉后頁面（以選擇apache圖標為例）

①圖標名稱

②圖標代碼

③獲取相應代碼

點擊后可看到相應的html和css代碼

點擊Get Code后彈出相應代碼

④刪除圖標

修改完成后，點擊Download下載壓縮包

點擊頁面底部Download開始下載

下載后導入圖標

將下載好的icoMoon安裝包解壓（這里偷懶用一下之前的圖）

解壓后的icomoon文件夾內容

demo-files文件夾和demo.html用于演示，ReadMe.txt是說明文檔，可以不加入項目

若從零開始引入圖標

在前端項目下新建文件夾用于存放圖標資源，將解壓后文件夾里的.css文件加入css文件夾，將解壓后文件夾里的fonts文件夾直接拖入assets里

項目文件夾部署

此處示例為項目文件夾 -> src -> assets -> css和fonts。路徑并不唯一，只要知道去哪里找就行。css文件也重命名過，只要知道怎么引用就行。

.css文件

.css文件內容

重點：

• font-family: 這里可以自己修改名稱，不過在后續引入時要注意保持font-family名稱一致
• url：根據文件位置更改url

若需要更新或引入新圖標

用解壓后文件夾里的各文件替換項目中已有文件，注意.css文件名稱、font-family和url推薦和原有內容保持一致。

引入圖標（以apache圖標為例）

引入所需代碼

將相應代碼粘貼到相應位置

注意：css部分必須要加上:before或:after以保證圖標正常顯示

font與svg、png區別（個人理解）

通過Generate Font下載的圖標本質上是字體而非圖片，反映在css部分就是對字體可以做的操作都可以對圖標做，比如設置height、width、color等。
就很方便 就很好嗷