MUI 扩展icon(将icon转换为ttf格式)

参考文章:http://ask.dcloud.net.cn/article/128

1. 首先要把icon转换成svg格式
2. 打开图标库网站,例如:iconfont和iconmoon
3. 这里以iconfont为例,iconfont有两种注册方式,github和微博

4. 登录之后我们将svg格式上传到iconfont,上传成功后可以在'图标管理'->'我的图标'中看到自己上传的icon

   
   

5. 选中自己刚刚上传的图标,添加到购物车

   
   
6. 进入购物车,添加至项目,如果没有项目可以创建一个

7. 在'图标管理'->'我的项目'下降项目下载至本地

8. 将下载后的文件解压,得到下面这些文件

   
   
9. 修改iconfont.css文件,下载下的文件包含了4种格式的文件eot,woff,ttf,svg,我们只需要保留ttf和svg这两种格式
   修改前的css文件
   
   修改后的css文件
   
   注意:官方文档中说只需要保留ttf格式就可以,但是我做的时候效果出不来,所以我还保留了一个svg文件,我的运行环境是macOS Sierra, iPhone 6s plus

10. 将iconfont.css文件放入css文件夹下,将iconfont.svg和iconfont.ttf放入fonts文件夹下

    
    

11. 将iconfont.css文件中的应用路径修改为实际路径

    
    
12. 使用的时候在class中写入'mui-icon iconfont icon对应的名称'就可以了

<nav class="mui-bar mui-bar-tab" id="tabBar">
  <a class="mui-tab-item mui-active" id="workbench.html">
    <span class="mui-icon iconfont icon-tabBar--workbench"></span>
    <span class="mui-tab-label">工作台</span>
  </a>
  <a class="mui-tab-item" id="customer.html">
    <span class="mui-icon iconfont icon-tabBar--customer"></span>
    <span class="mui-tab-label">客户</span>
  </a>
  <a class="mui-tab-item" id="store.html">
    <span class="mui-icon iconfont icon-tabBar--shop"></span>
    <span class="mui-tab-label">逛店</span>
  </a>
  <a class="mui-tab-item" id="mine.html">
    <span class="mui-icon iconfont icon-tabBar--mine"></span>
    <span class="mui-tab-label">我的</span>
  </a>
</nav>