我参加聚会有点晚了。只是想建议另一种方式。

  button.calendar::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free';
    left: -4px;
    bottom: 4px;
    position: relative;
  }

位置，左侧和底部用于对齐图标。

有时添加字体重量:600或以上也有帮助。

或者，如果使用Sass，可以“扩展”FA图标来显示它们:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

为此，你只需要通过: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 */
    }

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

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

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

似乎给出的答案并没有给出一个真正的背景，因为fontawesome是在你想要的背景区域之外渲染的。 下面是我制作“真实”背景效果的方法:

html:

<div id="bloc" class="bg_ico_outer" style="">
    <i class="fa fa-bookmark-o bg_ico"></i>
    <div class='bloc_inner'>
        <h2>test fontawesome as background</h2>
    </div>
</div>

css:

.bg_ico {
    position: absolute;
    top: 0px;
    right: -10px;
    font-size: 17em;
    color: green;
    transform: rotate(25deg);
}

.bg_ico_outer{position: relative; overflow: hidden;}

#bloc{
    height: 200px;
    width:200px;
    background: blue;
    margin:50px auto;
}
.bloc_inner{
    position: absolute;
}
h2{color: white;}