我之前因?yàn)轫?xiàng)目用bootstrap比較多,所以使用font awesome字體圖標(biāo)比較多,后來(lái)接觸到了iconfont,發(fā)現(xiàn)想要的什么圖標(biāo)都有,還可以自定義圖標(biāo),非常強(qiáng)大!之前看了一波教程,覺(jué)得繁瑣,自己弄明白后感覺(jué)如此簡(jiǎn)單,做了這么個(gè)簡(jiǎn)單教程,直接上圖,簡(jiǎn)單粗暴,避免新手走彎路,這里講解的默認(rèn)是元素使用類名;

step 1:百度iconfont,找到阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng),然后注冊(cè)登錄,或者用github登錄也行,此步驟跳過(guò);

step 2:找到圖標(biāo)管理->我的項(xiàng)目->然后新建項(xiàng)目:

右邊點(diǎn)擊新建項(xiàng)目,用于保存自己常用的圖標(biāo);

step 3:項(xiàng)目新建完成后,往項(xiàng)目里添加我們要想使用的圖標(biāo),找到圖標(biāo)庫(kù),搜索一個(gè)想要的圖標(biāo),然后添加到購(gòu)物車;

我現(xiàn)在將第一個(gè)安卓圖標(biāo)加入我的項(xiàng)目,點(diǎn)擊加入購(gòu)物車

step 4:添加到購(gòu)物車完成后,購(gòu)物車徽章數(shù)字應(yīng)該顯示1了,點(diǎn)擊右上角的購(gòu)物車圖標(biāo),選擇添加至項(xiàng)目,選擇我們剛剛創(chuàng)建的項(xiàng)目,確定;

自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的項(xiàng)目里了,如圖:

step 5:接下來(lái)一部比較關(guān)鍵,將打包好的字體文件下載到本地添加到你的項(xiàng)目中,在項(xiàng)目中引用文件中的iconfont.css文件;

下載下來(lái)解壓后的文件如下:

強(qiáng)調(diào)一次,把上面這些文件都放在一個(gè)文件夾內(nèi)，然后放在你的項(xiàng)目目錄中,再在你的項(xiàng)目中引入iconfont.css文件

step 6:到了最后一步了,如何在項(xiàng)目中使用字體圖標(biāo)呢,其實(shí)很簡(jiǎn)單,創(chuàng)建一個(gè)i標(biāo)簽或者span標(biāo)簽,添加兩個(gè)類名,一個(gè)固定的是iconfont,另一個(gè)是你想要的那個(gè)圖標(biāo)對(duì)應(yīng)的類名:

具體代碼如下:

好了,刷新頁(yè)面,圖標(biāo)是不是出來(lái)了呢?

Ok,到這一步,恭喜你成功了,是不是很簡(jiǎn)單,不簡(jiǎn)單?那就從頭再看一遍;

調(diào)節(jié)字體圖標(biāo)的大小是通過(guò)元素的font-size屬性來(lái)控制的;

總結(jié)

以上是生活随笔為你收集整理的iconfont 图标转为字体_iconfont字体图标的使用方法--超简单!的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。