好的應用需要好的圖示來映襯。

使用圖片做圖示的弊端有：固定尺寸；啟用樣式需要做兩套；佔空間。

相對於圖片圖示，字型圖示完美的解決了這些問題。

我們下面介紹小程式裡引入圖片的三種方式。

原生圖示

小程式裡原生圖示是通過icon標籤來引入的：

但是原生圖示只有這麼幾個，面對前端妖嬈繁雜的需求是捉襟見肘，遠遠不夠用啊！

WeUI圖示元件

要使用WeUI元件，我們需要到元件下載頁面去下載icon元件：developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

下載完成後我們會得到一個icon資料夾。

裡面有四個檔案：icon.js, icon.json, icon.wxml,icon.wxss

我們在專案根目錄下建立一個components資料夾，再將icon資料夾拷貝進去，然後在app.json中增加以下配置：

"usingComponents": { "mp-icon": "components/icon/icon"},

在測試頁面增加一段程式碼：

元件庫裡icon圖示列表請參考這個連結：developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html。

目前一共有81個，這些圖示對本人來說已經夠用了。

但是對於很多特定行業比如旅遊，外賣APP來說，圖示定製化程度可能更高。

那麼我們也需要讓小程式有這樣引入外部資源的能力。

iconfont圖示

真不是說，阿里的這個圖示庫(www.iconfont.cn)真是給眾多不會搞設計的程式設計師帶來了莫大的福祉（馬雲：這詞是我發明的）。

上面的圖示種類繁多，你想要的都有，更多的還是你想不到的。

你需要做的就是把喜歡的圖示加入購物車，然後分類作為一個專案下載下來：

解壓下載下來的download.zip檔案，將其中的iconfont.css檔案拷貝到小程式utils目錄下，重新命名為iconfont.wxss，開啟iconfont.wxss，將@font-face部分的一些url引用(紅色框選部分)刪除掉(看不清楚點選圖片看大圖哦)：

開啟app.wxss,在首行引入iconfont.wxss：

/**app.wxss**/@import './utils/iconfont.wxss';

在檢視檔案中，我們通過以下方式顯示圖示：

<icon class="iconfont icon-youxiang"></icon>

效果圖：

以上。