js使用icon-font，代替图片图标

在项目中我们经常需要用到一些图标

第一个想到的都会是去哪哪哪下个图片，说实在的，是真的不好，图片资源相对icon大多了，而且找图片很是头疼。

今天推荐阿里iconfont给大家！https://www.iconfont.cn/

进入网页后搜索自己需要的icon，可以直接下载使用。

当然我今天推荐的肯定不是这种方式。

我们可以将icon当做css字体使用，如下

1、新建项目

2、添加图标至新项目

3、将文件添加至自己的代码中

主要分为三种

1）复制阿里在线链接写在项目中，

 

使用代码如下

@font-face {
  font-family: 'iconfont';  /* project id 1497515 */
  src: url('//at.alicdn.com/t/font_1497515_62mahqpaeno.eot');
  src: url('//at.alicdn.com/t/font_1497515_62mahqpaeno.eot?#iefix') format('embedded-    opentype'),
  url('//at.alicdn.com/t/font_1497515_62mahqpaeno.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1497515_62mahqpaeno.woff') format('woff'),
  url('//at.alicdn.com/t/font_1497515_62mahqpaeno.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1497515_62mahqpaeno.svg#gs-fein') format('svg');
}
.myIcon{
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html

这个编码去阿里项目中查找
<span class="myIcon" >&#xe6f2;</span>

2)，引入阿里生成的在线css文件

<span class="icongouliang" ></span>

 3）、下载至本地

找一个ttf文件引入即可使用