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码

模板代码：

<text class='icon'>&#xf2b9;</text>

css代码

.icon {
    font-family: awesomefont
}

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