好的應(yīng)用需要好的圖標(biāo)來(lái)映襯。

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

相對(duì)于圖片圖標(biāo)，字體圖標(biāo)完美的解決了這些問(wèn)題。

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

原生圖標(biāo)

小程序里原生圖標(biāo)是通過(guò)icon標(biāo)簽來(lái)引入的：

但是原生圖標(biāo)只有這么幾個(gè)，面對(duì)前端妖嬈繁雜的需求是捉襟見(jiàn)肘，遠(yuǎn)遠(yuǎn)不夠用??！

WeUI圖標(biāo)組件

WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，基于小程序自定義組件構(gòu)建。

由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。

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

下載完成后我們會(huì)得到一個(gè)icon文件夾。

里面有四個(gè)文件：icon.js, icon.json, icon.wxml,icon.wxss

我們?cè)陧?xiàng)目根目錄下創(chuàng)建一個(gè)components文件夾，再將icon文件夾拷貝進(jìn)去，然后在app.json中增加以下配置：

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

在測(cè)試頁(yè)面增加一段代碼：

組件庫(kù)里icon圖標(biāo)列表請(qǐng)參考這個(gè)鏈接：developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html。

目前一共有81個(gè)，這些圖標(biāo)對(duì)本人來(lái)說(shuō)已經(jīng)夠用了。

但是對(duì)于很多特定行業(yè)比如旅游，外賣APP來(lái)說(shuō)，圖標(biāo)定制化程度可能更高。

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

iconfont圖標(biāo)

真不是說(shuō)，阿里的這個(gè)圖標(biāo)庫(kù)(www.iconfont.cn)真是給眾多不會(huì)搞設(shè)計(jì)的程序員帶來(lái)了莫大的福祉（馬云：這詞是我發(fā)明的）。

上面的圖標(biāo)種類繁多，你想要的都有，更多的還是你想不到的。

你需要做的就是把喜歡的圖標(biāo)加入購(gòu)物車，然后分類作為一個(gè)項(xiàng)目下載下來(lái)：

解壓下載下來(lái)的download.zip文件，將其中的iconfont.css文件拷貝到小程序utils目錄下，重命名為iconfont.wxss，打開(kāi)iconfont.wxss，將@font-face部分的一些url引用(紅色框選部分)刪除掉(看不清楚點(diǎn)擊圖片看大圖哦)：

打開(kāi)app.wxss,在首行引入iconfont.wxss：

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

在視圖文件中，我們通過(guò)以下方式顯示圖標(biāo)：

效果圖：

以上。

（正文已結(jié)束）

推薦閱讀：蘋果xr和x

免責(zé)聲明及提醒：此文內(nèi)容為本網(wǎng)所轉(zhuǎn)載企業(yè)宣傳資訊，該相關(guān)信息僅為宣傳及傳遞更多信息之目的，不代表本網(wǎng)站觀點(diǎn)，文章真實(shí)性請(qǐng)瀏覽者慎重核實(shí)！任何投資加盟均有風(fēng)險(xiǎn)，提醒廣大民眾投資需謹(jǐn)慎！