强本而节用,则天不能贫。------荀况
今天把原来的vue
页面改为nvue
发现之前的图标怎么都引不进去,搞了半天,后来通过debug
发现,我引入的方式是使用添加对应的class
给它加了个::before
伪元素
知道了这个就很简单了,我们按照官方文档引入字体
首先我在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"></text>
|
说实话,感觉nvue
坑好多。。。