ICON字体图标

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

图片：

        位图：bmp、jpg、gif、png等，缩放影响质量，会出现锯齿效果，影响美观；

        矢量图：svg，是一种使用xml定义的图像，可缩放，但不怎么美观，多为单色，另外具

                      有可交互性，如d3等。

雪碧图：（css_sprite），过去一段时间有较好的市场，常用于前端的性能优化方案，减少图片的

                http请求次数，使网页加载速度更快，提高页面性能。

近两年雪碧图已逐渐被字体图标所取代。

字体图标：可通过font属性修改样式，兼容性好；

        优点：轻量、灵活、兼容性好，目前应用广泛；

        缺点：多数图标只能被渲染成单色。

常见的图标库有：阿里图标库、iconmoon等。

以阿里库为例，三种字体图标的使用方法：

        1. font+html (unicode) 写法，兼容性最好（ie6+）

            需要引入iconfont.css文件，在iconfont.svg文件中查找图标对应的unicode编码。

 <div class="iconfont">;&234$63;</div>

        2. font+css (icon类名) 写法，通过css伪元素before实现，兼容ie8+

            需要引入iconfont.css文件，在iconfont.css中查找图标对应的class类名。    

<div class="iconfont icon-name" />

          3.使用Symbol方式引用，可以实现彩色图标

             需要引入iconfont.js文件

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

              其中.icon是自定义样式，指定全局icon规格，仅需定义一次，可参考官网的

.icon{
    width:1em;
    height:1em;
	vertical-align:-0.15em;
	fill:currentColor;
	overflow:hidden;
}

        unicode、class类名、symbol写法都可以通过fontsize来调整图标大小；

        unicode、class类名写法可以通过css color修改图标颜色，symbol写法不支持；

        symbol写法支持通过css 的width/height调整图标大小，unicode、class类名写法不支持；

维护项目中新增icon

        1. 场景一，原项目的icon都在。在原来icon基础上新增选择的icon，然后全部下载，全部覆盖

            替换原字体文件和css文件即可。

        2.场景二，原项目的icon存在差异，或不确定在不在。清空项目icon，选择新增的，下载对应

           文件，新建字体文件夹，再次引入即可。

阿里库提供了在线链接icon的功能，前提必须是外网

跨库使用icon

        如果即用到阿里库icon又用到iconmoon的icon，可将iconmonn中的icon下载为svg，然后上传至阿里库的项目中，最后从阿里库中统一下载使用。

​