本文簡(jiǎn)單的介紹下阿里iconfont的運(yùn)用，網(wǎng)頁中運(yùn)用iconfont可以極大的提高我們的工作效率，也能節(jié)約資源
- 使用iconfont的圖標(biāo)需要登錄，目前三種方式：微博，阿里內(nèi)部員工賬號(hào)，github賬號(hào)
- 需建立一個(gè)項(xiàng)目，搜索你需要的圖標(biāo)添加到你的項(xiàng)目中，當(dāng)然也可以直接搜索圖標(biāo)庫，如果需要配套的圖標(biāo)的話圖標(biāo)庫比較好
- iconfont的圖標(biāo)有三種運(yùn)用的方法，可以選擇想要的顏色轉(zhuǎn)為相應(yīng)格式的圖片，也可以作為字體使用
下面來介紹小程序如何使用
小程序底部標(biāo)簽欄的制作
需在小程序的app.json中添加如下代碼：
//'tabBar'中的list至少顯示兩個(gè)對(duì)象，詳見微信公眾平臺(tái)
"tabBar": {
"color": "默認(rèn)字體顏色",
"selectedColor": 選中時(shí)的字體顏色,
"list": [{
"pagePath": "pages/home/home",//導(dǎo)航路徑
"text": "home",//顯示的文字
"iconPath": "icon/home.png",//圖標(biāo)的相對(duì)路徑
"selectedIconPath": "icon/home-blue.png"http://選中時(shí)的圖標(biāo)相對(duì)路徑
},{
"pagePath": "pages/shoppingCar/shoppingCar",
"text": "shoppingcar",
"iconPath": "icon/car.png",
"selectedIconPath": "icon/car-blue.png"
}]
},
app.json中引用的圖標(biāo)需要本地文件，所以將你選好的圖片下載下來，注意一個(gè)圖標(biāo)下兩種顏色的文件分為選中狀態(tài)的未選中狀態(tài)，字體的顏色跟下載圖標(biāo)時(shí)選擇的顏色一樣，保存
image
大功告成
image
頁面中插入圖標(biāo)
下載圖標(biāo)庫解壓縮到本地文件夾，如下：
image
因?yàn)樾〕绦蛑惺遣蛔R(shí)別css文件的，所以需要將css下標(biāo)的文件后綴改為wxss
在需要圖標(biāo)的頁面的wxcss文件中引入圖標(biāo)庫如下：
/* pages/car/car.wxss */
/* 引入iconfont圖標(biāo) */
@import "../../icon/font/iconfont.wxss";
此時(shí)圖標(biāo)時(shí)作為類引入的，當(dāng)類名為icon-Checklabel時(shí)為選中狀態(tài)，當(dāng)類名為icon-Checklabelinterface為取消狀態(tài)，用三元表達(dá)式判斷當(dāng)前的圖標(biāo)是哪種
<!--pages/car/car.wxml-->
<!-- 根據(jù)data里面的list數(shù)組循環(huán)創(chuàng)建view -->
<!-- 下面的class樣式來源于iconfonts網(wǎng)站 -->
<view class="iconfont {{isChoose?'icon-Checklabel':'icon-Checklabelinterface'}}">
</view>
哦了
