引言

在實際專案中，過多的使用圖片，有可能會導致頁面載入速度過慢，但是，我們可以使用 iconfont 來展示圖示，它是一種用字型檔案取代圖片的解決方案。

在專案中使用 iconfont

我們可以在專案中引入阿里巴巴向量圖示庫。官網：iconfont.cn

現在，我們看看如何在專案中引入。

在專案管理頁，可以看見現在我們還沒有專案。

此時，專案建立好了，還沒有圖示，我們分別選擇幾個圖示並新增到建立的專案中：

從選擇圖示到新增到專案，經歷了下面幾個步驟：

選擇合適的圖示，然後點選圖示上的 “購物車” 按鈕圖示選完後，在右側懸浮或頂部的 “購物車” 按鈕上會顯示共選擇了幾個圖示點選右側懸浮或頂部 “購物車” 按鈕，彈出已選擇的圖示列表點選 “新增至專案” 按鈕，並選擇專案，然後點選 “確定” 按鈕，新增成功

在 iconfont 中應用 Symbol 元素作為引用去使用圖示，是一種全新的使用方式，也是 iconfont 平臺目前推薦的用法。它的優點是：

不用下載 iconfont 檔案不用修改 iconfont.cssmain.js中不用匯入 iconfont.css支援多色圖示

但它也有不足：

1. 相容性較差，只支援 ie9+ 以上瀏覽器、chrome 等主流瀏覽器

2. 瀏覽器渲染 svg 的效能一般，不如 png

所以在做專案前仔細斟酌，用哪一種方案好。

目前來講比較推薦 Symbol 引用方式。

本期文章也主要以這種方式進行講解，其它關於 iconfont 的使用方式可以在阿里巴巴圖示平臺找到詳細說明。

現在，我們把 iconfont 引入我們現實的專案中。

進入 public/index.html 檔案用 <script> 標籤的 src 屬性引入複製的連結：

接下來，我們將引入一小段通用的 CSS 程式碼，如果我們的專案每個頁面都有圖示的運用，我們可以將程式碼放入到全域性 CSS 檔案中，這裡以 App.vue 檔案的 <style> 標籤為例，引入如下 CSS 程式碼：

<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }</style>

為了演示方便，我們先清理下 src/App.vue 檔案的內容，清理 <template> 模板部分、JS 部分和 CSS 部分，最終檔案內容是這樣的：

現在，我們就可以在模板中使用下面的程式碼寫圖示了：

現在，利用我們現有的圖示演示一下具體使用方法。

例如，我們在 App.vue 中有一個 tabbar 佈局 （不是 Vue 元件），它的 <template> 部分是這樣的：

CSS 部分的程式碼是下面這樣：

注意示例中的第一個 iconfont 程式碼：

總結

利用 Symbol 形式使用 iconfont 有 2 個主要步驟：

在 <script> 標籤中，將線上生成的連結引入加入通用 CSS 程式碼

iconfont 簡化了專案開發的美工步驟，同時也提升了 Web 的效能，目前許多前端元件庫都有自己的圖示系統。