weex中如何使用iconfont

废话不多说,直入正题,如何在weex中使用iconfont?
1、载入iconfont字体

initIconFont () {
      // eslint-disable-next-line no-undef
      let domModule = weex.requireModule('dom')
      domModule.addRule('fontFace', {
        'fontFamily': 'iconfont',
        'src': "url('http://at.alicdn.com/t/font_627710_fuaoadfqv3sug14i.ttf')"
      })
    }

定义一个初始化iconFont的函数,然后在合适时机调用,比如页面created声明周期函数中。字体库不同,src对应的链接也不同。你甚至可以自己创建字体库或者使用开源的字体创建自己的iconfont项目,如何操作可以看这里。
2、使用iconfont
使用iconfont很简单,举个栗子:



需要注意的是,iconfont的text内容使用的格式unicode而不是网上别人贴出来的&#xxxx;样式的内容(这里描述有误)需要区分场景使用不同格式,如果是在标签里直接使用则选择&#xxxx;,如果是别的地方传入(如父组件传值到子组件props)则使用unicode格式。我这边在传值方式中使用&#xxxxx;时遇到了渲染问题,就是这个死样子:

image.png

你可能感兴趣的:(weex中如何使用iconfont)