填充一个 FontAwesome 图标

Question

我正在尝试填充 FontAwesome 中透明的时间圆图标。

<i class="fa fa-times-circle fa-lg" aria-hidden="true"></i>

所以我尝试将 background-color: white 应用到这个元素，但由于元素是方形的，我有一个方形的背景。我还尝试应用 border-radius: 100% 来获得圆形元素，但什么也没有......

所以我的问题是如何填充这个图标内的十字？

谢谢。

Answer 1

http://fontawesome.io/examples/#stacked

使用图标的fa-stack类和fa-stack-Nx类来堆叠图标：

.fa-stack .fa-circle{
  color: fuchsia;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

更多例子：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>


<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>


<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>


<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera