@font-face制作Web Icon
@font-face规则在css2中已经存在，但在css2.1中被删除，在css3中又重新被引入。自从Metro 风格被大多前段程序员青睐后，使用@font-face制作web icon 已经广泛使用于网页设计
下面例子是制作Metro风格按钮
1.在网站http://icomoon.io/app/上下载所需的图标
压缩包中包含有相应的例子
2.把fonts文件夹添加都你的网页文件中，
在css文件中初始化字体样式
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
3.引用字体样式
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
4.下面是html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用@font-face来实现icon</title>
</head>
<body>
<a class="btn" data-icon="" aria-hidden="true" href="http://www.baidu.com/"></a>
</body>
</html>
4.为btn添加css样式
.btn{ display:block; height:100px;line-height:100px; width:100px; background:#09F; text-align:center; font-size:3em; cursor:pointer;
}
5.效果图
来源：https://www.cnblogs.com/Kenvon/p/3280654.html