前端开发-阿里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">&#xe???;</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 来改变图标大小 */
　　　　　　 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的基本用法，我是吴超，一位有梦想的前端工程师！