字体图标的使用
不得不说字体图标使用起来真的很方便，能实现图片的效果，但实施起来却很方便，因为你可以把字体图标当作文字一样去随意修改，比如修改颜色、修改大小等，都十分易于去实现。
-
接下来就说说字体图标如何使用：
1、打开网站 icomoon.io
（1）点击右上角 Icomoon App
1.PNG
(2)选择要使用的图标，点击右下角Generate Font
2.PNG
(3)即可预览到已选择的图标，再点击右下角Font里的download（font旁边有设置按钮，可以设置名称和字体支持的浏览器版本。可自行选择），在桌面解压下载的文件包。
（4）找到里面的fonts文件夹。
3.PNG
（5）将fonts文件夹复制到和你正在做的网页的同一个文件夹下。
4.PNG
2、在style标签里加入这段话：
@font-face { /*声明字体*/
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
3、然后引用字体图标。
（1）打开解压后的文件夹，找到demo.html，打开该网页，复制你需要的图标后面的像手机一样的标志，再粘贴到span标签内。
5.png
（2）接下来就可以定义字体图标的属性了。
span {
font-size: 50px;
color: blue;
font-family: "icomoon";
}
！！此时要注意font-family的字体名称必须与开头声明里的名称相同。
效果如下图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@font-face { /*声明字体*/
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-size: 50px;
color: blue;
font-family: "icomoon";
}
</style>
</head>
<body>
<span></span>
</body>
</html>
6.PNG
