uinApp nvue如何使用阿里圖標iconfont

前言：發現社區在對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\')"

 

正確寫法是：（需要加上協議頭）

坑點二：

上面兩種引用形式，使用的內容編碼其實是不一樣的，這個可以在iconfont.com上面找到哈。

第一種引用方式的code獲取方式：
1.鼠標放在圖標上，選擇右上角的按鈕『編輯』
2. 彈出窗口后，復制里面的16進制的Unicode碼：e64e，使用時，需要在前面加上\u，即完整編輯為：\ue64e。

第二種引用方式的code獲取方式：
1.鼠標放在圖標上，直接復制即可。

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

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