icoMoon官網(wǎng) - Icon Font & SVG Icon Sets ? IcoMoon
圖標(biāo)下載
官網(wǎng)首頁 - 頂部導(dǎo)航欄 - IcoMoon App
點擊后進入圖標(biāo)選擇界面
若從零開始選擇圖標(biāo)
①點選自己需要的圖標(biāo)，選中的圖標(biāo)背景變白
②頁面底部Selection后的括號內(nèi)顯示當(dāng)前已選的圖標(biāo)數(shù)量
③icoMoon提供免費圖標(biāo)庫與不同收費標(biāo)準(zhǔn)的圖標(biāo)庫
④icoMoon支持從本地導(dǎo)入圖標(biāo)
⑤icoMoon支持導(dǎo)出svg與png格式圖標(biāo)
若需要更新已有圖標(biāo)
將本地icomoon文件夾中的selection .json文件拖入頁面中淡紫色區(qū)域
頁面提示：是否導(dǎo)入文件中的所有設(shè)置 可視實際情況進行選擇 隨后頁面更新着茸，顯示
點選或反選相應(yīng)圖標(biāo)以更新selection
完成圖標(biāo)選擇型奥，開始下載
點擊Generate Font，等待界面跳轉(zhuǎn)
①圖標(biāo)名稱
②圖標(biāo)代碼
③獲取相應(yīng)代碼
點擊后可看到相應(yīng)的html和css代碼
④刪除圖標(biāo)
修改完成后倍靡，點擊Download下載壓縮包
下載后導(dǎo)入圖標(biāo)
將下載好的icoMoon安裝包解壓（這里偷懶用一下之前的圖）
demo-files文件夾和demo.html用于演示猴伶，ReadMe.txt是說明文檔，可以不加入項目
若從零開始引入圖標(biāo)
在前端項目下新建文件夾用于存放圖標(biāo)資源塌西，將解壓后文件夾里的.css文件加入css文件夾他挎，將解壓后文件夾里的fonts文件夾直接拖入assets里
此處示例為項目文件夾 -> src -> assets -> css和fonts。路徑并不唯一捡需，只要知道去哪里找就行办桨。css文件也重命名過，只要知道怎么引用就行站辉。
.css文件
重點：
- font-family: 這里可以自己修改名稱呢撞，不過在后續(xù)引入時要注意保持font-family名稱一致
- url：根據(jù)文件位置更改url
若需要更新或引入新圖標(biāo)
用解壓后文件夾里的各文件替換項目中已有文件，注意.css文件名稱饰剥、font-family和url推薦和原有內(nèi)容保持一致殊霞。
引入圖標(biāo)（以apache圖標(biāo)為例）
將相應(yīng)代碼粘貼到相應(yīng)位置
注意：css部分必須要加上:before或:after以保證圖標(biāo)正常顯示
font與svg、png區(qū)別（個人理解）
通過Generate Font下載的圖標(biāo)本質(zhì)上是字體而非圖片捐川，反映在css部分就是對字體可以做的操作都可以對圖標(biāo)做脓鹃，比如設(shè)置height、width古沥、color等瘸右。
就很方便 就很好嗷
