Question

您好我在Font Awesome社交图标方面遇到了问题。我使用border-radius：50％;保持边框四舍五入，它适用于所有除facebook以外的所有其他图标，并且看起来椭圆形而不是圆形...以下是它的样子： http://i.imgur.com/rctsCbE.png

HTML：

<ul class="actions">
    <li><a href="#" class="fa solo fa-facebook social"><span>Facebook</span></a></li>
    <li><a href="#" class="fa solo fa-twitter social"><span>Twitter</span></a></li>
    <li><a href="#" class="fa solo fa-youtube social"><span>Youtube</span></a></li>
    <li><a href="#" class="fa solo fa-google-plus social"><span>Google+</span></a></li>
</ul>

CSS

.social{
    border-radius: 50%;
    border: 3px solid white;
    padding:30px;
}

Answer 1

如果你希望它们的大小相同，那么你不应该让图标字符的大小决定每个元素的宽度和高度，而是明确设置宽度和高度（这需要display:inline-block以及宽度和高度生效）。

Font Awesome fa-facebook圆形边框

1 个答案: