iconfont阿里爸爸做的开源图库

iconfont 三种使用姿势

1.unicode格式

优点

• 兼容性最好，支持ie6+
• 支持按字体的方式去动态调整图标大小，颜色等等

缺点

• 不支持多色图标
• 在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难

使用方法：

第一步：引入自定义字体 `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- 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

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

<i class="iconfont">3</i>

　　

2.font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：

• 兼容性良好，支持ie8+，及所有现代浏览器。
• 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
• 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
• 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

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

引入  ./iconfont.css

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

<i class="iconfont icon-xxx"></i>

相对于unicode 它的修改更加的方便与直观。但也有一个大坑，之前楼主一个项目中用到了两组font-class 由于没有做好命名空间，所有的class都是放在.iconfont 命名空间下的，一上线引发了各种雪崩问题，修改了半天，所以使用font-class一定要注意命名空间的问题。

3.symbol引用

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

• 支持多色图标了，不再受单色限制。
• 支持像字体那样通过font-size,color来调整样式。
• 支持 ie9+
• 可利用CSS实现动画。
• 减少HTTP请求。
• 矢量，缩放不失真
• 可以很精细的控制SVG图标的每一部分

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

引入  ./iconfont.js

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
    .icon {
        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>

使用svg-icon的好处是再也不用发送woff|eot|ttf| 这些很多个字体库请求了，我所有的svg都可以内联在html内。

官网参考地址: http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

vue的使用实例, 有兴趣可以去看看

相关地址: https://juejin.im/post/59bb864b5188257e7a427c09?utm_source=gold_browser_extension