zhangdaren
zhangdaren
  • 发布:2019-06-09 18:06
  • 更新:2022-04-22 14:55
  • 阅读:8855

nvue页面引用iconfont图标经验分享

分类:nvue

前言:发现社区在对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">&#xe64e;</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

错误写法:( 分分给你一个方框框看看~)

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

正确写法是:(需要加上协议头)

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

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

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

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

6 关注 分享
7***@qq.com 2***@qq.com 我不是大v 九涯 打脑壳 1***@qq.com

要回复文章请先登录注册

zhangdaren

zhangdaren (作者)

回复 2***@qq.com :
nvue呀?这个没试过 = =
2020-09-04 09:21
2***@qq.com

2***@qq.com

回复 zhangdaren :
我已经发布,大佬,帮我看看,https://ask.dcloud.net.cn/question/106238
2020-09-03 10:31
2***@qq.com

2***@qq.com

回复 zhangdaren :
出现的是占位符的东西,字体没出现,
2020-09-03 10:22
zhangdaren

zhangdaren (作者)

回复 2***@qq.com :
出现框框?
2020-09-01 18:49
2***@qq.com

2***@qq.com

我的为什么没出现??
2020-09-01 17:06
w***@126.com

w***@126.com

回复 Drager :
直接用绝对地址就可以了。
2020-06-13 15:38
无名吃瓜者

无名吃瓜者

回复 1***@qq.com :
console.log('App Launch')
let fontSrc = plus.io.convertLocalFileSystemURL('/static/iconfont/iconfont.ttf')
let domModule = weex.requireModule("dom");
domModule.addRule('fontFace', {
'fontFamily': 'iconfont',
'src': "url('file:/" + fontSrc + "')"
})
2020-04-11 19:25
zhangdaren

zhangdaren (作者)

回复 Drager :
有解决嘛?
2020-02-10 21:17
Drager

Drager

话说平时用 iconfont 都是网络引入? 不放到本地? 我就喜欢放本地, 结果nvue里src指定本地死活不行, 网上搜的方案全是网络引入的, 是我的错吗? 还是这个世界的错? (开玩笑
2020-01-14 23:05
zhangdaren

zhangdaren (作者)

回复 2***@qq.com :
方框框应该是引入文件失败了,可以试着发个贴,把包含问题的最少代码的项目上传上来,大家看看。
2019-07-27 17:48