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

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

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

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

原生圖標(biāo)

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

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

WeUI圖標(biāo)組件

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

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

要使用WeUI組件，我們需要到組件下載頁面去下載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"},

在測試頁面增加一段代碼：

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

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

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

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

iconfont圖標(biāo)

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

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

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

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

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

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

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

效果圖：

以上。

本文為企業(yè)推廣，本網(wǎng)站不做任何建議，僅提供參考，作為信息展示！

推薦閱讀：快門怎么調(diào)