本文简单的介绍下阿里iconfont的运用，网页中运用iconfont可以极大的提高我们的工作效率，也能节约资源
- 使用iconfont的图标需要登录，目前三种方式：微博，阿里内部员工账号，github账号
- 需建立一个项目，搜索你需要的图标添加到你的项目中，当然也可以直接搜索图标库，如果需要配套的图标的话图标库比较好
- iconfont的图标有三种运用的方法，可以选择想要的颜色转为相应格式的图片，也可以作为字体使用
下面来介绍小程序如何使用
小程序底部标签栏的制作
需在小程序的app.json中添加如下代码：
//'tabBar'中的list至少显示两个对象，详见微信公众平台
"tabBar": {
"color": "默认字体颜色",
"selectedColor": 选中时的字体颜色,
"list": [{
"pagePath": "pages/home/home",//导航路径
"text": "home",//显示的文字
"iconPath": "icon/home.png",//图标的相对路径
"selectedIconPath": "icon/home-blue.png"//选中时的图标相对路径
},{
"pagePath": "pages/shoppingCar/shoppingCar",
"text": "shoppingcar",
"iconPath": "icon/car.png",
"selectedIconPath": "icon/car-blue.png"
}]
},
app.json中引用的图标需要本地文件，所以将你选好的图片下载下来，注意一个图标下两种颜色的文件分为选中状态的未选中状态，字体的颜色跟下载图标时选择的颜色一样，保存
image
大功告成
image
页面中插入图标
下载图标库解压缩到本地文件夹，如下：
image
因为小程序中是不识别css文件的，所以需要将css下标的文件后缀改为wxss
在需要图标的页面的wxcss文件中引入图标库如下：
/* pages/car/car.wxss */
/* 引入iconfont图标 */
@import "../../icon/font/iconfont.wxss";
此时图标时作为类引入的，当类名为icon-Checklabel时为选中状态，当类名为icon-Checklabelinterface为取消状态，用三元表达式判断当前的图标是哪种
<!--pages/car/car.wxml-->
<!-- 根据data里面的list数组循环创建view -->
<!-- 下面的class样式来源于iconfonts网站 -->
<view class="iconfont {{isChoose?'icon-Checklabel':'icon-Checklabelinterface'}}">
</view>
哦了
