nvue引入图标坑

简介: nvue引入图标坑

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

今天把原来的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坑好多。。。

相关文章
|
6月前
uniapp Vue3 面包屑导航 带动态样式
uniapp Vue3 面包屑导航 带动态样式
138 1
|
6月前
uniapp中uview组件库丰富的tab标签
uniapp中uview组件库丰富的tab标签
145 0
|
2月前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
2月前
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
122 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
3月前
|
资源调度 JavaScript 前端开发
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
这篇文章介绍了在Vue 2项目中如何通过`v-viewer`插件实现图片的预览、切换、缩放、旋转等功能,并提供了插件的安装、配置和使用方法。
1256 0
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
|
4月前
|
容器
Vite项目当中的SVG图标的配置及图标全局组件的封装
Vite项目当中的SVG图标的配置及图标全局组件的封装
122 0
|
6月前
|
JavaScript 前端开发 小程序
uniapp中nvue页面如何全屏,map组件如何全屏?
uniapp中nvue页面如何全屏,map组件如何全屏?
380 3
|
6月前
|
移动开发 小程序 JavaScript
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
741 1
Vue3 antdv 如何动态渲染 icons-vue 图标(a-icon 不支持了)
Vue3 antdv 如何动态渲染 icons-vue 图标(a-icon 不支持了)
412 0
|
6月前
|
JavaScript 前端开发
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
527 0