小程序系列-使用iconfont

前言

iconfont是指使用字体文件代替图片文件，来展示图标和特殊字体的一种方法，目前我们使用的iconfont都是存储在阿里的iconfont网站上的。

获取iconfont文件

想要使用iconfont首先需要有iconfont的文件，在文章中使用的iconfont文件是笔者在www.iconfont.cn上下载的，你可以通过下面的步骤来获取iconfont文件
1. 登录www.iconfont.cn
2. 在搜索框中输入一个关键词，例如： 选择
3. 在iconfont列表中选中一个，然后点击下载图标
通过以上几步你就可以获得一个iconfont的文件

引入iconfont文件

与在web和APP中使用iconfont的方法相似，首先我们要将iconfont的文件引入到项目中
1. 在项目根目录中新建一个lib文件夹
2. 将iconfont的文件拷贝到这个文件夹下面
3. 在lib文件夹下新建一个icon.wxss文件
4. 将拷贝过来的iconfont文件中的stylesheet.css文件中的内容全部复制到icon.wxss文件中
5. 在小程序的app.wxss文件(全局使用)或者要使用的目标文件的样式文件中引入icon.wxss文件
6. 在xx.wxml文件中使用

视图部分

    <view>    
        <view  wx:for="{{items}}" wx:key="index">
          <i class="iconfont icon-xuanze" style="fontsize:20rpx;"></i>{{item.name}}
        </view>    
    </view>

样式部分

     @import '../util/icon.wxss'; 

    .intro {
      margin: 30px;
      text-align: center;
    }
    .checkbox{
      display: block;
    }

逻辑部分

const app = getApp()

Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ]
  }
})