weex中如何使用iconfont
2018-04-13 本文已影响96人
逍遥wqy
废话不多说,直入正题,如何在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很简单,举个栗子:
<template>
<text class="icon"></text>
</template>
<style>
.iconfont {
font-family: iconfont;
}
</style>
需要注意的是,iconfont的text内容使用的格式unicode而不是网上别人贴出来的(这里描述有误)需要区分场景使用不同格式,如果是在标签里直接使用则选择&#xxxx;
样式的内容&#xxxx;
,如果是别的地方传入(如父组件传值到子组件props
)则使用unicode格式。我这边在传值方式中使用&#xxxxx;
时遇到了渲染问题,就是这个死样子: