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

使用圖片做圖標的弊端有：固定尺寸；激活樣式需要做兩套；占空間。

相對于圖片圖標，字體圖標完美的解決了這些問題。

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

原生圖標

小程序里原生圖標是通過icon標簽來引入的：

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

WeUI圖標組件

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';

在視圖文件中，我們通過以下方式顯示圖標：

效果圖：

以上。

本文為企業推廣，本網站不做任何建議，僅提供參考，作為信息展示！

推薦閱讀：快門怎么調