使用图标字体的方法

在我们的页面布局中，使用图标字体可以说是我们前端人员必须要学会的基本功，但是图标文字的使用可不是简单的代码能写出来的，需要诸多的操作。

首先大部分初学者有一个问题 图标字体到底是图还是字呢？
我能明确回答，是字，是图一样的字（一句废话）

那这些字有什么独特之处呢？
看下面的图片，这些就是图标文字，看着像图片实际兼具文字的特性

这些图标字体字的优点有什么呢？
有图片一样的效果，但是还可以随意改变颜色，大小，阴影等文字的特性，比正常的图片的体积小的多，在浏览器中可以减少向服务器请求的次数，加快页面的加载，没有浏览器的兼容问题等等。

图标字体的使用方法？
1.下载字体图标
进入https://icomoon.io（一个外国网站，可能加载比较慢）
在这个网站中下载你需要的图标字体，
点击icomoon APP 进入页面。，对里面的内容进行选择。

下载完成是一个压缩包。icomoon.zip
2.将压缩包解压，找到fonts文件，放到我们需要使用的根目录文件下，就是你的html文件可以找到的位置
3.打开demo.html(也是压缩包里面的)，选中你下载的图标字体，复制到你写的html中你自己指定的位置，当你粘贴好了之后显示不出来任何东西只有空格，在浏览器中是一个小方块，属于正常现象，不要慌；
4.在这个html中关联的css样式里面添加固定代码

	@font-face {
	**font-family: 'icomoon';**
	src: url('../icomoon/fonts/icomoon.eot?7kkyc2');
	src: url('../icommon/fonts/icomoon.eot?7kkyc2#iefix') format('embeded-opentype'),
	url('../icommon/fonts/icomoon.ttf?7kkyc2') format('truetype'),
	url('../icommon/fonts/icomoon.woff?7kkyc2') format('woff'),
	url('../icommon/fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
	.icomoon {
		font-family:'icomoon' ;
	}

注意：要这个代码里面文件的路径是我自己的，你要是自己写你自己的文件路径，务必不能写错。

5.还要在你添加的图标字体位置写上 font-family: ‘icomoon’;

完成！