uniapp中nvue頁面如何使用iconfont字體圖標


  今天要使用到 nvue 頁面,在使用過程中發現 iconfont 圖標不好使了,這里記錄一下如何在 nvue 頁面中引入使用 iconfont 圖標。

1、JS部分

const domModule = weex.requireModule('dom'); domModule .addRule('fontFace', { fontFamily: 'iconfont', src: "url('https://at.alicdn.com/t/***.ttf')" }); // 這里需要引入你的 iconfont 項目的 ttf 文件

2、文本部分

  這里需要注意 2 點:

(1)nvue頁面中文字只能使用 <text></text> 標簽包裹,div、view之類的無法渲染。我就是這里踩了坑。

(2)iconfont 的unicode碼需要用 &#xe63c;   ——   &#x();   包裹,其中 e63c 就是 iconfont 的 unicode 碼

<text class="iconfont cc">&#xe63c;</text>

3、樣式部分

<style scoped> .iconfont { font-family: iconfont; } </style>

  做完這三步,就可以顯示了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM