nvue引入图标坑

阿超

发布于 2022-08-17 20:47:43

6680

文章被收录于专栏：快乐阿超快乐阿超

强本而节用，则天不能贫。——荀况

今天把原来的vue页面改为nvue

发现之前的图标怎么都引不进去，搞了半天，后来通过debug发现，我引入的方式是使用添加对应的class给它加了个::before伪元素

知道了这个就很简单了，我们按照官方文档引入字体

首先我在App.vue中写入css代码：

/* 加载图标字体 - 条件编译模式 */
/* #ifdef APP-PLUS-NVUE */
.my-iconfont {
	font-family: myIconfont;
}
/* #endif */

然后在对应的nvue页面中，在beforeCreate生命周期里调用addRule

beforeCreate() {
	// #ifdef APP-PLUS-NVUE
	const domModule = uni.requireNativePlugin('dom');
	domModule.addRule('fontFace', {
		fontFamily: 'myIconfont',
		src: "url('/iconfont/iconfont.ttf')"
	});
	// #endif
},

然后最重要的就是我们引入的icon需要是这样写：

<text class="my-iconfont">&#xe7b3;</text>

说实话，感觉nvue坑好多。。。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-10-29，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

nvue引入图标坑

nvue引入图标坑

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐