技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-13-5.使用字型圖示（iconfont）

由于之前是做UI的，在之前的圖示使用中，我都是直接将icon下載下傳成png格式來做圖，然後在網頁中以img形式引入并顯示。後來發現svg格式小一些，在網頁中就用svg格式圖示。

今天明白了阿裡圖示庫真正的使用方法，沒有使用過的朋友一起學習下。

1.找圖示

在圖示搜尋引擎中找我們需要的圖示，選中之後加入購物車：

2.下載下傳圖示代碼

選出我們需要的幾個圖示後，找到購物車：

點選下載下傳後下載下傳的是壓縮包，其中内容是css和字型檔案：

3.使用字型圖示

（1）将我們下載下傳好的壓縮包解壓複制，到我們的項目中，改名為iconfont。

（2）在項目中引入iconfont的css檔案

import './assets/iconfont/iconfont.css'           

在web的main.js主檔案中：

（3）使用iconfont

下載下傳的檔案中有一個html檔案，打開觀察圖示名：

可以觀察到其給我們自動生成了字型圖示的類名和使用方法，我們接下載下傳的使用就是通過類名引入字型圖示。

<span class="iconfont icon-more"></span>           

生成圖示，對此類字型圖示添加樣式時與字型方法相同。

注：以後每次添加新圖示，都需要在阿裡圖示中添加到購物車，重新下載下傳所有檔案替換之前下載下傳到assets檔案夾的iconfont檔案。