阿里巴巴矢量图标库—多色图标的使用

打开http://iconfont.cn/

1.搜索图标，加入库

搜索图标添加至库

2.将图标添加到项目

添加图标至项目

3.将项目下载到本地

下载图标项目

4.将相关的文件拷贝到网站目录下

图标项目文件

多色图标在页面的代码使用

第一步：拷贝http://iconfont.cn/项目下面生成的文件到本地项目：

iconfont.js

<script src="iconfont.js"></script>

第二步：加入通用css代码（引入一次就行）：

.icon {

width: 1em; height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">

        <use xlink:href="#icon-email"></use>

</svg>

获取类名方法如下图：

编辑图标 图标类名    xlink:href="#icon-email"

demo如下图：

多色图标效果图 demo代码