最近,在使用Weex开发一款移动电商应用,期间需要用到大量的图标,不经意间想到了阿里的iconfont。
那么我们如何使用iconfont呢?这里给大家简单介绍下iconfont的使用步骤:
1、先进入iconfont官网http://www.iconfont.cn; 2、新建一个图标项目,如下图:
3、在自己的iconfont项目中查找,点击查看在线链接,如下图:4、点击【我的项目】,然后点击生成代码,将生成的代码添加到Weex项目中,如下图:
5,在Weex 项目的组件初始化函数中,引入图片集,注意用驼峰命名。
created(){
let domModule = weex.requireModule('dom');
domModule.addRule('fontFace',{
'fontFamily': "iconfont",
'src': "url('http://at.alicdn.com/t/font_521216_w212618qmo.ttf')"
})
}
复制代码
6,然后,就可以在Weex页面中使用这些图标了。例如:
<text class="iconfont bar-ic"></text>
<style>
.iconfont {
font-family:iconfont;
}
.bar-ic{
padding-top: 14px;
font-size: 38px;
color: red;
}
</style>
复制代码
运行效果如下: