字体图标使用方法

1.图片有诸多的优点，但是缺点也很明显

例如：
图片会增加网页的大小（性能问题）
图片会增加访问网页时HTTP请求的次数（性能问题）
图片不能很好的进行缩放（失真）
。。。。。

2.字体图标：

本质是文字（体积小），虽然字体图标的本质是文字，但是也可以做出和图片一样的效果
并且可以随意修改颜色、大小、透明度等（扩展性强）

3.常用字体图标库

https://www.iconfont.cn/（阿里的网站）
https://icomoon.io/（国外网站，打开的慢）

4.字体图片的使用

4.1、设计师提供SVG格式图标
4.2、上传到对应字体图标网站
4.3、下载生成的代码使用

5.https://www.iconfont.cn/ 准备阶段

5.1、打开网站
5.2、注册登录

5.3、在搜索框内输入想要的图片，并将搜索结果中需要的图片加入购物车。
5.4、下载素材至本地机中。

5.5、在项目中新建font子目录，将素材中所有iconfont开头的文 件放到项目中的font文件夹下面

6.使用阶段

6.1、方法一：Unicode方法

1、新建一个CSS文件（例如index.css），将demo_index.html页面对应的代码拷贝进去
2、拷贝代码之后需要将@font-face中的资源路径改为拷贝资源对应的路径

	@font-face {
	    	font-family: 'iconfont';/*指定字体名称*/
	    	src: url('./../font/iconfont.eot');/*指定字体路径，将路径改为font下的路径。./：当前目录。../：父级目录*/
	    	src: url('./../font/iconfont.eot?#iefix') format('embedded-opentype'),
	    	url('./../font/iconfont.woff2') format('woff2'),
	    	url('./../font/iconfont.woff') format('woff'),
	    	url('./../font/iconfont.ttf') format('truetype'),
	    	 url('./../font/iconfont.svg#iconfont') format('svg');
	}
	.iconfont {
	    	 font-family: "iconfont" !important;
	    	font-size: 16px;
	    	ont-style: normal;
	    	-webkit-font-smoothing: antialiased;
	    	 -moz-osx-font-smoothing: grayscale;
	}

3、在HTML中引入CSS文件就可以使用字体图标了
4、挑选相应图标并获取字体编码，应用于页面

	<span class="iconfont">&#xe613;</span>
	<div class="iconfont">&#xe61a;</div>
	<p class="iconfont">&#xeb61;</p>

最终显示结果如下：

6.2、方法二：Font class方法（主流方法）

1.引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
2. 第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

6.3、方法三：Symbol方法（未来趋势，推荐使用）

1.引入项目下面生成的 symbol 代码：
<script src="./iconfont.js"></script>
2.第二步：加入通用 CSS 代码（引入一次就行）：

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

3.挑选相应图标并获取类名，应用于页面：

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