問題描述
最近在研究adminLTE后臺(tái)模板的時(shí)候球昨，看到里面的圖標(biāo)貌似不是用的我們常規(guī)格式，于是研究下怎么實(shí)現(xiàn)的访锻。
解決步驟
比如現(xiàn)在我想看看這個(gè)圖標(biāo)是怎么實(shí)現(xiàn)的褪尝。
通過開發(fā)者模式找到這個(gè)圖標(biāo)闹获，發(fā)現(xiàn)是個(gè)偽類期犬，可以猜測(cè)使用了content屬性添加了一個(gè)圖標(biāo)河哑，介于i 標(biāo)簽是斜體，所以我猜測(cè)是用了url（）函數(shù)龟虎。
進(jìn)去之后發(fā)現(xiàn)是這個(gè)玩意璃谨，emmmm 本人才疏學(xué)淺沒見過這種寫法。難道是通過js代碼解析了這個(gè)f200嗎鲤妥，我又到底下去看佳吞。
這里用到了@font-face，這里解釋一下@font-face棉安，這是用font-family來指定字體的名字底扳，src來指定字體的位置，其實(shí)也就是自定義字體贡耽，其他屬性就是一些設(shè)置而已衷模。
==看到這里可以明白圖標(biāo)就是所謂的字體，這下恍然大悟蒲赂，上面的\f200不就類似Unicode編碼的編號(hào)嗎阱冶，只不過這里用的是自定義的而已。==
url(../webfonts/fa-solid-900.woff2) format("woff2"),
url(../webfonts/fa-solid-900.woff) format("woff"),
url(../webfonts/fa-solid-900.ttf) format("truetype")
仔細(xì)查找發(fā)現(xiàn)是這三個(gè)字體文件共同作用使得圖標(biāo)生效滥嘴。
解決方案
那么如何將圖標(biāo)轉(zhuǎn)化成字體呢
下面提供一種最簡單的方法木蹬。到iconfont上面去下載就行了。
首先進(jìn)入iconfont官網(wǎng)若皱，找到圖標(biāo)加入購物車：
在左上角的購物車?yán)锩嫦螺d代碼：
將壓縮出來的包放到你的庫里面镊叁，主要是框住的三個(gè)，svg也可以試試看看要不要走触，我沒有試過意系。
上圖的HTML文檔中是使用方法，我就不一一講了饺汹，見下圖：
這里的三種引用方法都可以去嘗試一下：
其他方法
==下載icomoon來轉(zhuǎn)化自己設(shè)計(jì)的圖標(biāo)==
下面是鏈接蛔添，自己去研究一下，要是打不開兜辞，去網(wǎng)上下載即可迎瞧。
https:/ /icomoon.io
