前端开发-阿里iconfont
介绍： Iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台，设计师将图标上传至Iconfont平台，用户可以自定义下载多种格式的Icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
操作：用户可在Iconfont网站新建自己的项目，然后进入图标库选择自己需要的图标加入购物车，进入购物车，有三种方式供操作，
（1）添加至项目【会将图标添加到你建立的项目中去，可到图标管理页面中下载项目到本地，添加到项目应用中使用】
（2）下载素材【将选中的图标直接下载，可选格式为svg与png】
（3）下载代码【将带有选中图标的代码目录下载下来，可以直接添加到项目中去使用】
PS：选中的图标会下载到iconfont.css文件中
使用：将带有选中图标的代码文件夹直接添至项目的根目录中，对于前端开发，有三种引用方式：
（1）unicode引用
unicode是字体在网页端最原始的应用方式
优点：
1.兼容性最好，支持IE6+，以及所有的主流浏览器；
2.支持按字体的方式去动态调整图标大小，颜色等等；
缺点：
1.只能使用单色图标
2.由于是用编码的形式表示图标，造成语意不明确
应用：在需要引用的页面引入目录中的iconfont.css文件，打开demo_unicode.html会有图标与编码供选择，复制相应的编码到项目代码中去
代码：<i class="iconfont">???;</i>
（2）font-class引用
优点：
1.兼容性良好，支持IE8+，以及所有主流浏览器
2.语意明确，书写直观，想改图标直接修改类名即可
缺点：还是不支持多色图标
应用：在需要引用的页面引入目录中的iconfont.css文件，打开demo_fontclass.html会有图标与类名供选择，复制相应的类名到项目代码中去
代码：<i class="iconfont icon-???"></i>
（3）symbol引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：
优点：
1.支持多色图标，不再受单色限制
2.通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
缺点：
1.兼容性较差，支持IE9+，以及主流浏览器
2.浏览器渲染svg格式的图片性能一般，不如png
应用：在需要引用的页面引入目录中的iconfont.js文件，打开demo_symbol.html会有图标与类名供选择，复制相应的类名到项目代码中去
代码：
在页面中写入通用代码（写一次即可）：
.icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-???"></use> </svg>
以上就是阿里iconfont的基本用法，我是吴超，一位有梦想的前端工程师！
