Iconfont是什么纠俭？
iconfont是阿里旗下的一套圖標(biāo)庫晴圾，UI設(shè)計師設(shè)計號圖標(biāo)后黄绩，會將圖標(biāo)上傳到iconfont的項目庫中。前端開發(fā)人員需要下載項目圖標(biāo)其垄，并在項目中使用苛蒲。它的原理就是將很多 icon 做成字體庫，通過樣式或者字體對應(yīng)的字符集來顯示這個 icon绿满。
跳過注冊/登陸
項目中使用
ifonfont 可以讓我們使用三種方式引入臂外，分別是unicode，font class喇颁，symbol漏健，我們點擊不同的方式獲取代碼。下面我說下這三種具體怎么使用橘霎。
首先我們將我們字體庫下載到本地
我們將這些文件放在項目一個文件夾中蔫浆，我們只需要以下這些文件
我們需要將iconfont.css引入到我們的項目中。
第一種：Unicode方式
unicode是字體在網(wǎng)頁端最原始的應(yīng)用方式姐叁，我們直接在圖標(biāo)上復(fù)制對應(yīng)的代碼即可
<link rel="stylesheet" href="./iconfont/iconfont.css">
<div>
<i class="iconfont"></i>
</div>
如果你用的是vue瓦盛，那么你需要在main.ts中引入iconfont.css，其他框架大同小異
import { createApp } from 'vue'
import App from './App.vue'
import '../assets/iconfont/iconfont.css';
app.mount('#app')
unicode特點：
（1）兼容性最好外潜，支持ie6+原环，及所有現(xiàn)代瀏覽器。
（2）支持按字體的方式去動態(tài)調(diào)整圖標(biāo)大小处窥，顏色等等嘱吗。
（3）但是因為是字體，所以不支持多色滔驾。只能使用平臺里單色的圖標(biāo)谒麦，就算項目里有多色圖標(biāo)也會自動去色。
第二種：Font class方式
font-class是unicode的方式的變種嵌灰，主要是解決unicode書寫不直觀弄匕，語意不明確的問題。
和unicode一樣沽瞭，我們直接在圖標(biāo)上復(fù)制對應(yīng)的代碼即可
<link rel="stylesheet" href="./iconfont/iconfont.css">
<div>
<i class="iconfont icon-dingwei1"></i>
</div>
與Unicode使用方式相比迁匠，具有以下特點
（1）兼容性好，支持IE8+，以及所有現(xiàn)代瀏覽器
（2）相比于Unicode語意明確城丧，書寫更直觀
（3）替換圖標(biāo)時延曙，使用class定義圖標(biāo)，所以替換時只需要修改class里面的Unicode引用
（4）本質(zhì)上還是使用的字體亡哄，所以多色圖標(biāo)是不支持的
第三種：Symbol方式
這是一種全新的使用方式枝缔，應(yīng)該說這才是未來的主流，也是平臺目前推薦的用法蚊惯。
我們直接在圖標(biāo)上復(fù)制對應(yīng)的代碼即可
<script src="./iconfont/iconfont.js"></script>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dingwei1"></use>
</svg>
</div>
如果你用的是vue愿卸，那么你需要在main.ts中引入iconfont.js，其他框架大同小異
import { createApp } from 'vue'
import App from './App.vue'
import '../assets/iconfont/iconfont.js';
app.mount('#app')
這種用法其實是做了一個 SVG 的集合截型，與另外兩種相比具有如下特點：
（1）支持多色圖標(biāo)了趴荸，不再受單色限制。
（2）通過一些技巧宦焦，支持像字體那樣发钝，通過 font-size, color 來調(diào)整樣式。
（3）兼容性較差波闹，支持 IE9+酝豪，及現(xiàn)代瀏覽器。
（4）瀏覽器渲染 SVG 的性能一般精堕，還不如 png孵淘。
總結(jié)
當(dāng)然我們也可以在線使用這些圖標(biāo)，我們只需復(fù)制在線的鏈接到項目中歹篓，模板中的用法和離線是一樣的夺英，不建議我們在線使用，穩(wěn)定性不保證
