在寫前端頁面時，我們經常會用到一些小圖示之類的圖片，如果使用圖片的話程式碼寫起來比較麻煩，最近發現一個方便實用的方法，直接引用就可以了。
首先我們輸入網址：https://www.iconfont.cn/
可以百度搜尋：阿里巴巴向量圖，就會出來這個網址
以下我推薦兩種比較常用也是比較方便的方法。
方法1：font-class引用
- 相容性良好，支援ie8+，及所有現代瀏覽器。
- 因為使用class來定義圖示，所以當要替換圖示時，只需要修改class裡面的圖片名稱引用。
- 不過因為本質上還是使用的字型，所以多色圖示還是不支援的。
第一步： 進入網站我們可以看到一個搜尋框，直接輸入你想要的圖示名稱，也可以在圖示庫找。
第二步：然後加入購物車.
第三步：點選購物車建立一個新專案，確定，如果同一個專案後面要追加圖片就不需要再重新建立了.
第四步：接下來就會出現以下這個頁面，複製程式碼，引用到程式碼的文件。
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">第五步：引入程式碼切記加上“ http: ”
第六步：挑選相應圖示並獲取類名複製貼上，使用 class\="iconfont 後面複製圖片名稱，應用於頁面即可實現效果。
<body>
<i class\="iconfont icon-xxx"></i>
</body>方法2: symbol引用
- 是一種全新的使用方式，也是目前推薦的用法。網站也有相關介紹可以參考，與上面方法1相比具有如下特點：
- 支援多色圖示了，不再受單色限制。
- 透過一些技巧，支援像字型那樣，透過font-size,color來調整樣式。
- 相容性較差，支援 ie9+,及現代瀏覽器。
- 瀏覽器渲染svg的效能一般，還不如png。
第一步：一個專案如果要用到多個圖示，也可以把要用的圖示一起選好加入到購物車，再點選更新程式碼，再更新程式碼引用連線，這個方法需要下載到本地。
第二步：下載好後可以看到資料夾裡面到一些檔案，在內碼表面引入js檔案。
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
<script src="iconfont.js"></script>第三步：把檔案包放在專案到同一個目錄下，這樣引用到圖示才能生效.
第四步：同樣到方法，我們在需要引用到圖示下方複製貼上圖片名稱在svg裡，更換 href="更換名稱".
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-079aiqing"></use>
</svg>第五步：在內碼表面我們需要引入以上兩個檔案地址以外，還需要引入一段style程式碼。
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>以下是全部程式碼作為參考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阿里巴巴向量圖</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
<script src="iconfont.js"></script>
</head>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<body>
<input type="text" placeholder="搜尋">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-079aiqing"></use>
</svg>
</body>
</html>程式碼效果：
總結：
第一種方法，直接引入就可以用，快捷方便，不需要下載，使用起來比較方便，缺點只能單一使用，不支援顏色。
第二種方法，支援多色，以及多個圖片引入效果也會比較好，缺點需要下載到本地檔案包，並且一定要放在同一個目錄下才能使用。
總體來說阿里巴巴向量圖對前端開發者還是非常有幫助，而且還是免費使用，以上方法大家可以根據自己到需求使用。
作者：湯清麗
日期：2019-12-29
微信：lenat666
本作品採用《CC 協議》，轉載必須註明作者和本文連結