官網(wǎng):iconfont-阿里巴巴矢量圖標(biāo)庫(kù)iconfont-國(guó)內(nèi)功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫(kù)，提供矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等功能。阿里巴巴體驗(yàn)團(tuán)隊(duì)傾力打造，設(shè)計(jì)和前端開發(fā)的便捷工具http://www.iconfont.cn

使用方法：

1.??注冊(cè)賬號(hào)

2.? 登錄后可搜索自己想要的字體圖標(biāo)

3.? 例如：搜索weibo

4.??鼠標(biāo)滑到自己想要的圖標(biāo)后，點(diǎn)擊第一個(gè)購(gòu)物車圖形

?

5.??可在右上方的搜索框搜索下一個(gè)自己想要的圖標(biāo)，并加入購(gòu)物車。

6.??選擇完畢后，點(diǎn)擊右上方的購(gòu)物車圖樣

7.??然后點(diǎn)擊添加至項(xiàng)目

8.??點(diǎn)擊“加入項(xiàng)目”’右邊的圖樣，該圖樣表示新建一個(gè)項(xiàng)目

9.? ??輸入新建項(xiàng)目的名字,點(diǎn)擊確定

10.??在彈出的界面中點(diǎn)擊“暫無代碼，點(diǎn)此生成”

11.? 雙擊出現(xiàn)的鏈接

12.??將彈出的界面的代碼全部復(fù)制，粘貼放入一個(gè)新建的css文件中

13.???在html文件中引入該新建的css文件

14.??復(fù)制彈出字體圖標(biāo)代碼界面的網(wǎng)址：

15.??同樣將該網(wǎng)址引入html文件中

16.??如下圖所示，將“iconfont” 和所需要引入的字體圖標(biāo)前的名字復(fù)制

17.??放入div中

?

18.??字體圖標(biāo)的樣式可在原來復(fù)制粘貼圖標(biāo)代碼的css文件（如第16條下的圖片）中直接修改，也可另建一個(gè)新的css文件，在其中修改

以第17條下的圖片為例，展現(xiàn)出來的效果：

?

?

?

總結(jié)

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

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