在网页设计的过程中，经常会遇到很多小图标。
本人原以为会是在一张图片上可以截取到的，但在检查元素之后发现并不是用图像制作的。
上图：
首先，我们需要了解 FONTAWESOME 图标：
FONTAWESOME 图标介绍（http://fontawesome.dashgame.com/）
FONTAWESOME 图标（附码表）（http://www.bootcss.com/p/font-awesome/design.html）
Font-Awesome github 项目（https://github.com/FortAwesome/Font-Awesome）
接下来，以一个例子来说明怎样达到预定效果，效果图：
具体步骤如下：
1. 首先，在HTML的文件的< head >里先插入代码：
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
2.利用content 和 伪类选择器来达到效果：
HTML内容：
<div class="r1">
<a href="#" class="e1"></a>
<em style="font-style: normal">QQ登录</em>
</div>
CSS内容：
.r1
{
width:80px;
height:42px;
/*border:1px solid red;*/
}
.r1 a
{
width:140px;
height:140px;
text-decoration: none;
/*border:1px solid red;*/
}
.e1::before
{
content: "\f1d6"; /*图标的编号*/
font-family: FontAwesome;
color: #00b6f8;
background-size: cover;
font-size: 150%;
/*用此方法设置图标大小，直接设置宽高不会有作用*/
}