如何将字体图标引入uni-app中

如何将字体图标引入uni-app中

第一步：在阿里巴巴的iconfont官网下载好字体图标
第二步：将下载好的字体代码中后缀名为.ttf的文件取出来

第三步：在项目目录中将这个.ttf放好

第四步：创建一个css文件和一个js文件

js文件中：

1. 导入dom模块，加载ttf文件
2. .字体文件family添加样式

const dom = weex.requireModule('dom');
dom.addRule('fontFace', {
	fontFamily: 'iconfont',
	src: "url('/static/font/icon.ttf')"
});
export default {
	'appreciate': '\ue644',
	'check': '\ue645',
}

css文件中：使用时font-family，定义自己用的名字就行

.icon {
	font-family: iconfont;
}

第五步：main.js中引入js文件

import Icon from "@/common/js/icon.js"

Vue.prototype.$store = {
	icon: Icon
}

第六步：在页面style中引入css文件

<style>
	@import url("/common/css/main.css");
</style>

最后在页面中

//class名字就是css文件中定义的class名字
<text class="icon">{{$store.icon.my}}</text>