前言:今天說下在項目中的使用圖示庫
GitHub:
https://github.com/Ewall1106/mall
一、建立圖示項目
1、打開
阿裡巴巴矢量圖庫這個網站,進入圖示管理中,在裡面建立一個項目
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuIGOygjNhFGZxETM0YjM4kDM2kTOzIGMmlzN0IjMhRjYfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
iconfont官網
2、然後我們進入圖示庫中添加幾個圖檔到購物車中
addCart
3、然後在購物車中将圖示添加到項目裡面
添加到項目
二、下載下傳圖示到本地
進入我的項目中,然後下載下傳到本地;
這裡有三種不同的方式下載下傳,差別大家可以到官網裡面了解更多;
download
三、項目中引入
1、ok,下載下傳完成了以後,除了
iconfont.js
字型檔案對我們沒有什麼用以外,我們把所有的
iconfont
複制一下。
iconfont
2、全部複制到
styles
目錄下
styles
3、然後我們到
main.js
中全局引入一下
隻要引入
iconfont.css
就可以了
main.js
為什麼我們這裡路徑直接以
styles
開頭的,因為我們在
webapck.base.conf.js
中的
alias
中配置下路徑,這個細節在前面章節有講,這裡再提一下。
四、使用
1、我們在項目中用一下,随便找個頁面,随便寫個标簽,但
class
類名要為
iconfont
使用
2、
span
裡面的包裹的十六進制碼去網站裡面拿
我的項目
3、引入成功沒?
浏覽器中檢視
ok。
參考學習
https://www.jianshu.com/p/03172908d344 http://www.iconfont.cn