做網(wǎng)站的時(shí)候難免用到很多小圖標(biāo)，之前一直用的是國(guó)外的Font Awesome，好用是挺好用，就是圖標(biāo)庫(kù)有點(diǎn)大，很多都用不到，有點(diǎn)浪費(fèi)資源。

所以最近開始使用iconfont阿里巴巴矢量圖標(biāo)庫(kù)，那么具體如何在自己的網(wǎng)頁(yè)中使用呢？

這里簡(jiǎn)單記錄下使用方法。

官方代碼應(yīng)用web端使用教程中，提到了三個(gè)使用方法，包括：

unicode引用

font-class引用

symbol引用

我們這次引用的方法是unicode引用，兼容性較好，但不能使用后來(lái)的多色圖標(biāo)等新功能。

首先我們需要一個(gè)iconfont阿里巴巴矢量圖標(biāo)庫(kù)的賬號(hào)。

登陸后即可以開始使用，支持三種賬號(hào)快捷登錄。

登陸后挑選圖標(biāo)加入購(gòu)物車。

然后一起添加到項(xiàng)目中。

然后就可以在我發(fā)起的項(xiàng)目中看到您剛剛添加的圖標(biāo)。

這樣就完成了圖標(biāo)庫(kù)的基本創(chuàng)建。

接下來(lái)要開始引用這個(gè)圖標(biāo)庫(kù)，具體使用步驟如下：

首先在個(gè)人項(xiàng)目中新建fonts.css樣式，并在頁(yè)面中引用。

比如我在css文件夾下建立了fonts.css樣式，并在demo頁(yè)面中引用這個(gè)css樣式

然后拷貝項(xiàng)目下面生成的 @font-face到fonts.css樣式中并定義使用 iconfont 的樣式。

我是直接拷貝項(xiàng)目下的在線地址然后修改的，其實(shí)也可以先下載到本地然后引用。

(比如我下載好壓縮包后，在項(xiàng)目下新建fonts文件夾，并把所有文件放到文件夾下，并在css中引用，如下圖：)

然后就可以在頁(yè)面中，挑選相應(yīng)圖標(biāo)并獲取字體編碼并應(yīng)用。

比如我寫的這個(gè)小demo：

打開寫好的html，就可以看到成功應(yīng)用了：

可以點(diǎn)擊鏈接在線查看效果：demo

如果有問題歡迎留言，我看到會(huì)盡力回答。

總結(jié)

以上是生活随笔為你收集整理的阿里图标css的使用中的使用方法,iconfont阿里巴巴矢量图标库的正确使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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