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
}

接下來在模擬器上進行測試