填写FontAwesome图标

时间:2017-05-01 14:19:59

标签: html css font-awesome

我正在尝试填充FontAwesome中的时间圈图标,这个图标在内部是透明的。

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

所以我尝试将背景颜色:白色应用于此元素,但由于元素是平方的,因此我有一个平方背景。我还尝试应用border-radius:100%来获得圆角元素,但没有...

所以我的问题是如何在这个图标中填充十字架?

感谢。

1 个答案:

答案 0 :(得分:4)

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

使用fa-stack课程和fa-stack-Nx课程为您的图标堆叠图标:

&#13;
&#13;
.fa-stack .fa-circle{
  color: fuchsia;
}
&#13;
<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>
&#13;
&#13;
&#13;

更多例子:

&#13;
&#13;
<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
&#13;
&#13;
&#13;