iconfont使用

iconfont使用

1.首先在阿里图标库中找到需要的图标
2.点击“添加入库”
3.打开购物车，添加到项目
4.打开我的项目，可以看见已经添加好的图标
5.点击“下载至本地”
6.把下载好的压缩包压缩，复制到项目中
7.选择合适的方式引入（一般是font class和symbal）

font class方式引入

1.引入iconfont.css文件
2. 使用图标：<span class='iconfont icon_add'></span>

symbal方式引入

引文symbal方式可以使用多彩图标，所以不仅引入iconfont.css
,还要引入iconfont.js
1.引入iconfont.css和iconfont.js
2.使用：
css:

.icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}

html:

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

• 不同的引入方式可以直接参考下载好的字体文件中demo_index.html文件，自己动手，丰衣足食~