Question

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

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

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

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

感谢。

Answer 1

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

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

＆＃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;

<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;

填写FontAwesome图标

1 个答案: