前言：发现社区在对nvue使用iconfont图标的文章还是比较少，在这里刚好遇到了，那就分享一下我的解决方法。

在项目中遇到了需要在nvue里使用iconfont图标，
刚开始照着社区搜索的答案：https://ask.dcloud.net.cn/question/64622

这样引入css文件：

<style src="@/common/iconfont.css"></style>

 

然后再使用<div class=”iconfont icon-like”></div>，真机运行，纹丝不动，气人的是还没法调试……

再次搜索发现社区都是只言片语，于是将搜索范围扩大到百度，发现了玄机。

下面给出正确打开方式：

<!--使用unicode的形式-->
<text class="iconfont icon-like"></text>
 
<!--图标内容使用data里的变量-->
<text :style="{fontFamily:\'iconfont\',color:\'red\',fontSize:\'40px\'}">{{fontName}}</text>
data:{
    return {
          fontName: "\ue64e",
    }
},
created() {
    var domModule = weex.requireModule("dom");
    domModule.addRule(\'fontFace\', {
           \'fontFamily\': \'iconfont\',
           \'src\': "url(\\'http://at.alicdn.com/t/font_876280_0c92t3na1oei.ttf\\')"
    })
}
.iconfont {
    font-family: iconfont;
}
.icon-like {
    width: 36px;
    height: 36px;
    font-size: 34px;
}

 

上面的代码展示了两种图标使用方式，自行选择其中一种使用，亲测有效。

——————————–下面展示一些坑点———————————–

坑点一：

载入的字体文件ttf文件，url前面一定得有协议头，如http，iconfont上面是没有协议头的，应该是为了自适应支持https

uni-app里nvue页面引用iconfont图标经验分享

错误写法：（ 分分给你一个方框框看看~）

\'src\': "url(\\'//at.alicdn.com/t/font_876280_0c92t3na1oei.ttf\\')"

 

正确写法是：（需要加上协议头）



坑点二：


上面两种引用形式，使用的内容编码其实是不一样的，这个可以在iconfont.com上面找到哈。


第一种引用方式的code获取方式：
1.鼠标放在图标上，选择右上角的按钮『编辑』
2. 弹出窗口后，复制里面的16进制的Unicode码：e64e，使用时，需要在前面加上\u，即完整编辑为：\ue64e。


uni-app里nvue页面引用iconfont图标经验分享
uni-app里nvue页面引用iconfont图标经验分享


第二种引用方式的code获取方式：
1.鼠标放在图标上，直接复制即可。


uni-app里nvue页面引用iconfont图标经验分享




原文链接：https://blog.csdn.net/zhangdaren/article/details/91355412


参考文章：https://weex.apache.org/zh/docs/modules/dom.html#getlayoutdirection


 















    

























							

   
版权声明：本文为DeerLin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。



本文链接：https://www.cnblogs.com/DeerLin/p/13326888.html