圆形图标充当正方形

Question

我正在使用一些社交媒体图标（Font-awesome）在bootstrap中创建一张卡片。出于某种原因，我的所有图标都被视为方框，并且周围有黑色轮廓。我的悬停阴影也围绕着正方形而不是图标本身。

为什么会发生这种情况，我该如何解决？

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

<div class="col-md-12 text-center">
  <a href="" type="button" class="btn-floating btn-small">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x" style="color:#00aced;"></i>
      <i class="fa fa-twitter fa-stack-1x" style="color:#ffffff;"></i>
    </span>
  </a>

  <a href="" type="button" class="btn-floating btn-small">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x" style="color:#0077B5;"></i>
      <i class="fa fa-linkedin fa-stack-1x" style="color:#ffffff;"></i>
    </span>
  </a>

  <a href="" type="button" class="btn-floating btn-small">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x" style="color:#171515;"></i>
      <i class="fa fa-github fa-stack-1x" style="color:#ffffff;"></i>
    </span>
  </a>
</div>

Answer 1

框边框由你的锚中的type="button"参数生成，在bootstrap的样式表中有一个已定义的-webkit-appearance: button;。因此，请删除type="button"参数，或根据需要设置样式。

对于阴影，如果您希望它们保持图标的形状而不是装箱，则应使用text-shadow或filter: drop-shadow代替box-shadow