在實(shí)際的開發(fā)中，我們可能會(huì)為了使用有限的幾個(gè)圖標(biāo)，引入一個(gè)龐大的字體圖標(biāo)庫(kù)，也可能會(huì)苦惱于設(shè)計(jì)師同學(xué)設(shè)計(jì)的圖標(biāo)是圖片格式的。其實(shí)不用煩惱，這些問(wèn)題有非常簡(jiǎn)單的解決方案，等你熟悉之后，就是幾分鐘的事兒。
1.將 png 格式的圖標(biāo)轉(zhuǎn)成svg格式
推薦 jinaconvert.com 這個(gè)網(wǎng)站
2.將 svg 格式的圖標(biāo)轉(zhuǎn)成字體圖標(biāo)
推薦 iconmoon 這個(gè)網(wǎng)站
- 點(diǎn)擊右上角
IconMoon App進(jìn)入WebApp - 點(diǎn)擊左上角
Import Icons批量倒入之前已經(jīng)轉(zhuǎn)成 svg 的圖標(biāo)文件 - 點(diǎn)擊選中所倒進(jìn)來(lái)的圖標(biāo)，也可以點(diǎn)擊右邊的
menu圖標(biāo)全選 - 點(diǎn)擊右下角
Generate Fonts生成圖標(biāo) - 點(diǎn)擊右下角已經(jīng)變成
Download的按鈕，下載 iconfonts 壓縮包
3.引入字體圖標(biāo)到項(xiàng)目中
- 將上述下載的壓縮包解壓，可以看到文件夾里邊有好多東西，我們只需要將
style.css和fonts這個(gè)文件夾拷到項(xiàng)目樣式文件夾里即可。 - 在需要使用字體圖標(biāo)的頁(yè)面，根據(jù)路徑引入
style.css - 按照如下方式使用：
<span class="icon-about">
