字体Awesome facebook圆角边框

Question

你好，我有一个问题，字体，可怕的社会图标。我使用了边框半径: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 )。