阿里矢量图标三种用法

一.unicode
1.引入iconfont.css
<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
2.<span class="iconfont"></span>
兼容IE6+，不支持多色

二.class
1.引入iconfont.css
<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
2.你<i class="iconfont yugu">好</i>啊</
兼容IE8+，不支持多色

三.symbol
1.引入iconfont.js
<script src="./font/iconfont.js"></script>
2.<svg class="icon" aria-hidden="true">
<use xlink:href="#yugu"></use>
</svg>
icon的样式按需自定义，示例：
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
兼容IE9+，支持多色
注意：

当页面的图标没有正常显示，显示为黑色小方框时 image.png
一种原因可能是引入的文件路径错误，另一种可能是这个图标下载下来的时候就有问题了（这一点可以从demo_index.html中看出来），其它原因基本就是低级的拼写错误了