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坑好多。。。

相关文章
|
JavaScript Java Android开发
uniapp通过蓝牙传输数据 (安卓)
uniapp通过蓝牙传输数据 (安卓)
741 1
|
JavaScript 前端开发
Vue3--Vue Router详解--学习笔记
Vue3--Vue Router详解--学习笔记
293 3
|
JavaScript 前端开发
VUE组件:如何在Vue中实现组件的动态引入?
VUE组件:如何在Vue中实现组件的动态引入?
2158 0
elementUI el-upload上传组件实战使用
elementUI el-upload上传组件实战使用
|
SQL 运维 Oracle
Oracle 超时设置2:设置实例级参数
Oracle超时设置系列的第二篇文章,设置实例级参数
807 0
|
10月前
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
944 18
|
移动开发 小程序 API
uniapp通过蓝牙传输数据 (ios)
uniapp通过蓝牙传输数据 (ios)
747 1
|
JavaScript 前端开发 小程序
uniapp中nvue页面如何全屏,map组件如何全屏?
uniapp中nvue页面如何全屏,map组件如何全屏?
823 3
|
12月前
|
传感器 物联网 定位技术
低功耗蓝牙
低功耗蓝牙(Bluetooth Low Energy,简称BLE)是一种无线通信技术,专为低功耗应用设计。它在保持蓝牙无线连接的同时,大幅降低了能耗,适用于各种小型设备和传感器,如智能手环、健康监测器等。
|
JSON Java 定位技术
【Android App】GPS获取定位经纬度和根据经纬度获取详细地址讲解及实战(附源码和演示 超详细)
【Android App】GPS获取定位经纬度和根据经纬度获取详细地址讲解及实战(附源码和演示 超详细)
4533 1
下一篇
开通oss服务