iconfont的三种使用方式及其优缺点

iconfont的三种使用方式及其优缺点

使用方法

1. unicode
   优点:
   • 兼容性最好，支持ie6+
   • 支持按字体的方式去动态调整图标大小，颜色等等
     缺点：
   • 不支持多色图标
   • 有兼容性问题
2. font-class，跟unicode原理是一样的
   优点：
   • 兼容性良好，支持ie8+
   • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
3. svg
   优点：
   • 支持多色图标了，不再受单色限制。
   • 支持像字体那样通过font-size,color来调整样式。
   • 支持 ie9+
   • 可利用CSS实现动画。
   • 减少HTTP请求。
   • 矢量，缩放不失真
   • 可以很精细的控制SVG图标的每一部分

一般人使用icontfont（svg）图标的方式

1. 拷贝项目下面生成的symbol代码：
   
   用浏览器打开图片上的js地址 http://at.alicdn.com/t/font_996878_jvvtv7inqvo.js，然后另存或者复制代码到你的项目中
2. 加入通用css代码（一般放到公共样式里面，引入一次就行）：

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

1. 挑选相应图标并获取类名，应用于页面：

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