iconfont添加新图标_Weex开发之正确使用iconfont

最近，在使用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">&#xe644;</text>

  <style>
   .iconfont {
        font-family:iconfont;  
    }
   .bar-ic{
        padding-top: 14px;
        font-size: 38px;
        color: red;
    }
  </style>

运行效果如下：