我正在 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>
最佳答案
框边框是由 anchor 中的 type="button"
参数生成的,该参数在 bootstrap 的样式表中定义了 -webkit-appearance: button;
。因此,请删除该 type="button"
参数,或根据需要设置其样式。
对于阴影,如果您希望它们保持图标的形状而不是被框起来,您应该使用 text-shadow
或 filter: drop-shadow
而不是 box-shadow
关于html - 圆形图标充当正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49502432/