CSS ： 网页引用Font Awesome图标

在网页设计的过程中，经常会遇到很多小图标。
本人原以为会是在一张图片上可以截取到的，但在检查元素之后发现并不是用图像制作的。

上图：

首先，我们需要了解 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%;
    /*用此方法设置图标大小，直接设置宽高不会有作用*/

}