本文主要介绍图标字体在小程序中的如何使用。
1 小程序中自带的图标
- 小程序原生的icon组件，只支持不到10个类型
- 小程序icon的属性：type、size、color
- 小程序icon组件的type类型：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
2 如果需要更多的图标怎么办？
- 使用图片
- 使用字体图标-iconfont
- 使用svg
3 如何使用iconfont
字体图标的来源：www.iconfont.cn/
创建项目
点击资源管理器-我的项目-新建项目按钮，创建项目
填写项目相关信息
注意：虽然在创建项目的时候可以选择多个字体格式，但实际并不会生效。
所以在生成代码的时候，还需要在项目设置中再次选择字体格式，否则不会 .eot、.svg 格式。
将图标添加至项目中
- 将小图标添加到购物车
- 点击购物车，选择添加至项目，选择相应的项目即可
生成css代码
- 在我的项目中，选择要生成代码的项目
- 在顶部tab选择项目设置，设置字体格式
- 选择要生成的字体图标的类型
- 点击更新代码生成新的在线代码或选择下载代码到本地
在项目中使用iconfont
使用在线代码
- 新建一个iconfont.css文件，将生成的在线代码拷贝进去
- 将css代码引入到html文件中
- 示例代码：
<span class="iconfont icon-cangchucangku">
注意：生成的代码中没有加http，复制代码后需要加上。
使用下载代码
- 新建一个font文件夹，将后缀为.eot、.svg、.ttf、.woff、.woff2的图标文件放入。
- 修改iconfont.css中图标文件的路径。
- 将iconfont.css引入到html文件中。
- 示例代码：
<span class="iconfont icon-cangchucangku">。
4.在小程序中使用iconfont
使用在线代码
- 在小程序中新建iconfont.wxss文件。
- 将iconfont.wxss文件引入到app.wxss样式文件中，
@import 'iconfont.wxss';。 - 代码示例：
<view class="iconfont icon-cangchucangku" style="font-size:100rpx;"></view>。
