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