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

2017-07-07  本文已影响0人  年华盛开

打开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代码
上一篇 下一篇

猜你喜欢

热点阅读