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文件引入即可使用