weex踩坑之旅第三弹 ~ 在weex中集成font-awesome

为了完成一个APP开发，图标是必不可少，使用图片图标加载速度慢，编程复杂。可以考虑使用字体图标库，阿里有一套图标库 http://www.iconfont.cn/collec...，大家可以借鉴，但我更偏向于使用font-awesome(官网 http://fontawesome.io/icons)。那么，如何将其集成到weex开发中呢？这并不是一个简单的事情。

一开始我尝试使用在vue中使用style-loader,css-loader加载css文件，使用file-loader加载字体文件，web环境测试ok，但是部署到真机时，直接报错！这种传统的加载字体库的方式显然不适用于weex开发，这是因为在native环境中根本不支持dom，bom，而style-loader,css-loader插件中有大量的dom操作

怎么办？查看weex文档发现一个有用的模块，现在发现，官方文档也没有大家说的那么不堪，仔细看看还是有很多可以借鉴和学习的地方，只不过一开始不是很熟悉，所以感觉晦涩难懂。

在weex中集成font-awesome

1. 获取ttf字体文件

根据官方文档，可以将ttf文件加载到项目中，并且可以指定fontFamily。那么，从哪里获取字体文件呢，cdn(http://www.bootcdn.cn/)!通过...，可以知道ttf文件的位置为https://cdn.bootcss.com/font-...

2. 设置字体

应该在哪里设置字体？在使用之前呗。我是将其放在了vue生命周期的created函数中

let domModule = weex.requireModule('dom');
//...
created(){
            //添加规则 addRule是可以为dom 添加一条规则，目前支持自定义字体fontFace规则，构建自定义的font-family，可以在text使用
      domModule.addRule('fontFace', {
          'fontFamily': "awesomeFont",
          'src': "url('https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0')"
      });
}

3. 引用

已经迫不及待要看看效果了。那么如何使用呢？font-awesome标准用法是导入css文件，然后给i标签添加class，添加不同的class具有图标，但是我们现在没有导入css文件，而是直接导入字体库，那我们在使用的时候也是直接通过unicode使用字体。在http://fontawesome.io/cheatsheet 中可以查看到图标对应的unicode码

模板代码：



css代码

.icon {
    font-family: awesomefont
}

接下来在模拟器上进行测试