51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

nvue引入图标坑

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

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

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

image-20211029192024215

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

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

|---------------------|-------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | hljs css /* 加载图标字体 - 条件编译模式 */ /* #ifdef APP-PLUS-NVUE */ .my-iconfont { font-family: myIconfont; } /* #endif */ |

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

|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 | hljs javascript beforeCreate() { // #ifdef APP-PLUS-NVUE const domModule = uni.requireNativePlugin('dom'); domModule.addRule('fontFace', { fontFamily: 'myIconfont', src: "url('/iconfont/iconfont.ttf')" }); // #endif }, |

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

|-----------|-----------------------------------------------------------| | 1 | hljs vue <text class="my-iconfont">&#xe7b3;</text> |

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

赞(0)
未经允许不得转载:工具盒子 » nvue引入图标坑