阿里巴巴矢量图的使用

博主在看到阿里巴巴的网站时发现 购物车前面的图标不是用img来做的，是用阿里巴巴的矢量图来做的。接下来介绍一下，关于阿里巴巴矢量图的使用方法。
1.首先进入网站
http://www.iconfont.cn/
2.在输入框中输入自己需要的图标

比如输入：购物车
3.添加入库

4.单击购物车图标的按钮，如图所示

点击添加至项目，创建一个项目名。这里可能会让你登录账号，所以登录账号就行。
5.编码方式选择”unicode”编码，这里我添加了多个图标，再点击”下载至本地”

6.将下载完的文件解压后，放到某一文件夹中，右键打开demo_unicode.html文件

7.把上述文件中的代码复制到自己的项目中

  @font-face {font-family: "iconfont";
          src: url("iconfont.eot"); /* IE9*/
          src: url("iconfont.eot#iefix") format("embedded-opentype"), /* IE6-IE8 */
          url("iconfont.woff") format("woff"), /* chrome, firefox */
          url("iconfont.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url("iconfont.svg#iconfont") format("svg"); /* iOS 4.1- */
        }

        .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;
        }

特别提醒：src中的地址要注意别写错

 <i class="icon iconfont">&#xe600;</i>
                    <div class="name">购物车</div>
                    <div class="code">&amp;#xe600;</div>
                </li>

上面i标签中的class值就是上面样式中的class。

以上，具体内容还需要自己摸索。