堆叠的图标

KuaiKan 2020-10-9 793

堆叠的图标

fa-twitter 上的 fa-square-o
fa-flag 上的 fa-circle
fa-terminal 上的 fa-square
fa-ban 上的 fa-camera

如果想要将多个图标组合起来,使用fa-stack类,作为父容器,fa-stack-1x作为正常比例的图标,fa-stack-2x作为大一些的图标。还可以使用fa-inverse(BootStrap4 文本颜色和背景颜色)来切换图标颜色。您可以在父容器中通过添加更大的图标类来控制整体大小。

<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


签名:这个人很懒,什么也没有留下!
最新回复 (0)
返回