字型圖示的應用

DJsnake發表於2018-11-05

在專案中有很多的小圖示,以前用的都是圖片。在迭代的過程中發現了這些問題。

1、多個需求中,使用的圖片不統一,導致看起來很難受

2、前端放這麼多圖片資源,載入慢。

如何生成自己的iconfont

1、準備 .svg files

2、用這個nb網站,icomoon.io/app/#/selec…

3、import yourself svgFiles

字型圖示的應用

4、generate font

字型圖示的應用

5、how to use iconfont

字型圖示的應用

解壓後,將生成的fonts style.css檔案放到自己的專案中。

字型圖示的應用

如果想用這個icon,只需要他的這個名字。

字型圖示的應用

<span class="icon-3x1"></span>
複製程式碼

相關文章