iconfont-图标管理

web上目前推荐symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

优点： 支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

缺点：兼容性较差，支持 ie9+,及现代浏览器。 浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

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

//at.alicdn.com/t/font_1473319176_4914331.js 第二步：加入通用css代码（引入一次就行）：

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

如果是在react项目中引入的话，这里的xlink:href需要改成xlinkHref（注意l是小写）,class要改成className才会起作用。aria-hidden则不需要改成驼峰法

图标样式可以使用一般的css对字体的样式来控制，比如设置该svg父元素（直接设置svg的字体样式有的不能起作用因为svg和字体的样式属性不同）的font-size，color属性等控制字体的大小，颜色等。

也可以直接使用svg的样式控制，具体可以参考：svg中use元素引用symbol样式的思考 http://blog.csdn.net/xiaozhu2hao/article/details/53183743

iconfont各个场景下的图标使用步骤具体参考：

results matching ""