00字体图标iconfont的制作与使用--阿里矢量图库

一、iconfont的使用范围

　　在工作当中，经常会用到嵌在元素里的小图标

在这种情况下，如果使用<img>标签或者用作背景图片，也能实现这种效果。但是如果这么做的话，就必须把图片一个个切下来做成精灵图，过于麻烦。而且图标一般都会改变颜色形状，就要求一个图标制作多个状态的图。另外，背景图片还牵扯到background-size的兼容性问题，不容易控制大小和位置。而使用字体图标，完全可以避免这些问题，不仅可以改变大小，还可以改变颜色。

二、常用字体图标的方式

阿里巴巴矢量图库（ http://www.iconfont.cn/ ）
fontello（ http://fontello.com/ ）
icommoon（ http://icomoon.io/app/#/select ）
font-awesome（ http://fortawesome.github.io/Font-Awesome/ ）
glyphicon halflings（ http://glyphicons.com/ ）

三、阿里图库的使用步骤

　　1.打开图库的网址（ http://www.iconfont.cn/ ）

　　2.可以制作也可以搜索找到自己需要的图标，将其加入购物车

　　3.打开购物车就可以看到之前找到的图标了，点击下载代码

　　4.解压下载的压缩包，就会看到里面有一堆的东西

　　5.这个压缩包中其实有三种引入方式，我们打开相应的html文件就可以查看每种引入方式的具体信息

四、三种引入方式的优势和缺陷

　　1.font-class引用方式

　　　　a)包含

　　　　b)引入

<link rel="stylesheet" type="text/css" href="fontclass/iconfont.css" />

　　　　c)使用

　　　　　　** icon-xxx通过看上面的html文件看到

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

　　　　d)特点

　　　　　　i.兼容：IE8+

　　　　　　ii.语义明确，书写直观

　　　　　　iii.使用class定义图标，替换方便

　　　　　　iv.不支持多色图标

　　2.unicode引用方式

　　　　a)包含

　　　　b)引入

 <script type="text/javascript" src=" symbol/iconfont.js" ></script>

**css文件中加入

 .icon {

    width: 1em; height: 1em;

    vertical-align: -0.15em;

    fill: currentColor;

    overflow: hidden;

 }

　　　　c)使用

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

　　　　d)特点

1. 　　兼容：IE9+
2. 　　支持多色图标，不再受单色限制
3. 　　支持通过font-/color调整字体样式
4. 　　浏览器渲染svg的性能一般

　　3.symbol引用方式

　　　　a)包含

　　　　b)引入

** css文件加入

 @font-face {

   font-family: 'iconfont';

   src: url('unicode/iconfont.eot地址');

   src: url('unicode/iconfont.eot地址?#iefix') format('embedded-opentype'),

   url('unicode/iconfont.woff地址') format('woff'),

   url('unicode/iconfont.ttf地址') format('truetype'),

   url('unicode/iconfont.svg地址#iconfont') format('svg');

 }

 .iconfont{

   font-family:"iconfont" !important;

   font-size:16px;font-style:normal;

   -webkit-font-smoothing: antialiased;

   -webkit-text-stroke-width: 0.2px;

   -moz-osx-font-smoothing: grayscale;

 }

　　　　c)使用

 <i class="iconfont">&#xxxxx;</i>

　　　　d)特点

兼容性：IE6+
支持按字体方式动态调整图标颜色大小
不支持多色