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>
复制代码

运行效果如下：

iconfont支持三种引用方式：unicode引用、font-class引用和symbol引用。

unicode引用

unicode是字体在网页端最原始的应用方式，特点是：

• 兼容性最好，支持ie6+，及所有现代浏览器。
• 支持按字体的方式去动态调整图标大小，颜色等等。
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

unicode使用步骤如下： 第一步：拷贝项目下面生成的font-face：

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
复制代码

第二步：定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
复制代码

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>
复制代码

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。使用步骤如下： 第一步：拷贝项目下面生成的fontclass代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
复制代码

第二步：挑选相应图标并获取类名，应用于页面

<i class="iconfont icon-xxx"></i>
复制代码

symbol引用

这是一种全新的使用方式，也是平台目前推荐的用法。与上面两种相比具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。

使用步骤如下： 第一步：拷贝项目下面生成的symbol代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
复制代码

第二步：加入通用css代码

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
复制代码

第三步：挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
复制代码

参考：iconfont使用技巧