为此，你只需要通过:before或:after向所需元素添加content属性和font-family属性。

例如:我想在我的帖子中所有的a元素之后附加一个附件图标。所以，首先我需要搜索这样的图标是否存在于fontawesome。就像我在这里找到的那个箱子，也就是一个回形针。然后我右键单击那里的图标，在pseudo属性之前输入::，以获取它正在使用的内容标记，在我的例子中，我发现它是\f0c6。然后我会在css中这样使用它:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

您不能使用文本作为背景图像，但可以使用:before或:after伪类将文本字符放置在您想要的位置，而不必添加各种凌乱的额外标记。

请确保在实际的文本包装器上设置position:相对位置，以便定位工作。

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

编辑:

Font Awesome v5使用了比旧版本更多的字体名称:

对于FontAwesome v5，免费版本，使用:Font -family: "Font Awesome 5 Free" 对于FontAwesome v5, Pro版本，使用:Font -family: "Font Awesome 5 Pro"

注意，您也应该设置相同的font-weight属性(似乎是900)。

找到字体名称的另一种方法是右键单击页面上的示例字体awesome图标，并获得字体名称(与找到utf-8图标代码的方法相同，但请注意，您可以在:before上找到它)。

不需要在CSS中嵌入内容。你可以把徽章内容放在fa元素中，然后调整徽章的css。http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

巩固以上所有内容，下面是工作良好的最终类

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

实际上，即使是字体很棒的CSS也有类似的策略来设置图标样式。如果您想快速获取图标代码，请检查非缩小的font-awesome.css文件，它们是....每个字体都很纯净。

这似乎是最简单的解决方案:-)

#content h2:before {
   font-family: FontAwesome;
   content: "\f055";
   position:absolute;
   left:0;
   top:0;
}