做網站的時候難免用到很多小圖標，之前一直用的是國外的Font Awesome，好用是挺好用，就是圖標庫有點大，很多都用不到，有點浪費資源。

所以最近開始使用iconfont阿里巴巴矢量圖標庫，那么具體如何在自己的網頁中使用呢？

這里簡單記錄下使用方法。

官方代碼應用web端使用教程中，提到了三個使用方法，包括：

unicode引用

font-class引用

symbol引用

我們這次引用的方法是unicode引用，兼容性較好，但不能使用后來的多色圖標等新功能。

首先我們需要一個iconfont阿里巴巴矢量圖標庫的賬號。

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

登陸后挑選圖標加入購物車。

然后一起添加到項目中。

然后就可以在我發起的項目中看到您剛剛添加的圖標。

這樣就完成了圖標庫的基本創建。

接下來要開始引用這個圖標庫，具體使用步驟如下：

首先在個人項目中新建fonts.css樣式，并在頁面中引用。

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

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

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

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

然后就可以在頁面中，挑選相應圖標并獲取字體編碼并應用。

比如我寫的這個小demo：

打開寫好的html，就可以看到成功應用了：

可以點擊鏈接在線查看效果：demo

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。