html - Font Awesome fa-facebook 圆 Angular 边框

Question

你好，我对 Font Awesome 社交图标有疑问。我使用了边界半径:50%；为了保持边框圆润，它适用于除 facebook 之外的所有图标，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

如果你想让它们都一样大，那么你不应该让图标字符的大小决定每个元素的宽高，而是明确地设置一个宽高(这将需要显示: inline-block 以及宽度和高度生效)。