1.挑选需要的iconfont图标
阿里iconfont开源库

2.添加购物车

不亏是做电商的，这里也像购物一样！
可以多选几个方便后面的测试效果！

3.下载代码

4.解压文件

5.导入项目
创建static/font目录，将iconfont.css、iconfont.ttf导入到static目录中

6.修改iconfont.css文件
源文件

这时候编译会不通过！会提示svg、truetype、woff…找不到！那就将这几个去掉！

其他几个报错的文件是没有引进来，那是其他平台兼容问题的，移动端上不需要，所以我就没有引入文件，免得导致宝体变大！

7.App.vue引入iconfont.css

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	/* 引入自定义图标库 */
	@import './static/font/iconfont.css';
</style>

8.pages中配置导航栏按钮测试

	"path": "pages/benefit/benefit",
			"style": {
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTitleText": "我的收益",
				"app-plus": {
					"scrollIndicator": "none", //隐藏滚动条
					"bounce": "none", //关闭反弹效果
					"titleNView": {
						"buttons": [
							// 右边
							{
								"color": "#999999",
								"colorPressed": "#BBBBBB",
								"float": "left",
								"fontSize": "14px",
								"text": "\ue61e",
								"fontSrc": "/static/font/iconfont.ttf",
								"width": "70px"
							},
							// 右边
							{
								"color": "#999999",
								"colorPressed": "#BBBBBB",
								"float": "right",
								"fontSize": "14px",
								"text": "收益明细",
								"width": "70px"
							}
						]
					}
				}
			}

查看效果

9.vue界面中使用class样式

<text class=" iconfont icon-fanhui1"></text>

界面效果