前言
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: '法国' },
]
}
})