前言:發現社區在對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
錯誤寫法:( 分分給你一個方框框看看~)
'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.鼠標放在圖標上,直接複製即可。