天天看點

9、阿裡巴巴矢量圖庫icon-font的運用

前言:今天說下在項目中的使用圖示庫

GitHub:

https://github.com/Ewall1106/mall

一、建立圖示項目

1、打開

阿裡巴巴矢量圖庫

這個網站,進入圖示管理中,在裡面建立一個項目

9、阿裡巴巴矢量圖庫icon-font的運用

iconfont官網

2、然後我們進入圖示庫中添加幾個圖檔到購物車中

9、阿裡巴巴矢量圖庫icon-font的運用

addCart

3、然後在購物車中将圖示添加到項目裡面

9、阿裡巴巴矢量圖庫icon-font的運用

添加到項目

二、下載下傳圖示到本地

進入我的項目中,然後下載下傳到本地;

這裡有三種不同的方式下載下傳,差別大家可以到官網裡面了解更多;

9、阿裡巴巴矢量圖庫icon-font的運用

download

三、項目中引入

1、ok,下載下傳完成了以後,除了

iconfont.js

字型檔案對我們沒有什麼用以外,我們把所有的

iconfont

複制一下。

9、阿裡巴巴矢量圖庫icon-font的運用

iconfont

2、全部複制到

styles

目錄下

9、阿裡巴巴矢量圖庫icon-font的運用

styles

3、然後我們到

main.js

中全局引入一下

隻要引入

iconfont.css

就可以了

9、阿裡巴巴矢量圖庫icon-font的運用

main.js

為什麼我們這裡路徑直接以

styles

開頭的,因為我們在

webapck.base.conf.js

中的

alias

中配置下路徑,這個細節在前面章節有講,這裡再提一下。

四、使用

1、我們在項目中用一下,随便找個頁面,随便寫個标簽,但

class

類名要為

iconfont

9、阿裡巴巴矢量圖庫icon-font的運用

使用

2、

span

裡面的包裹的十六進制碼去網站裡面拿

9、阿裡巴巴矢量圖庫icon-font的運用

我的項目

3、引入成功沒?

9、阿裡巴巴矢量圖庫icon-font的運用

浏覽器中檢視

ok。

參考學習

https://www.jianshu.com/p/03172908d344 http://www.iconfont.cn

繼續閱讀