小程序iconfonts的运用

本文简单的介绍下阿里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为取消状态，用三元表达式判断当前的图标是哪种

哦了