CODEWITHSUNDEEP
htmlcssfont-awesome
Bartosz
Bartosz

Reputation: 17

Font Awesome fa-facebook rounded border

Hello there I've got a problem with Font Awesome social icons. I used border-radius:50%; to keep the border rounded, it works for all except facebook which is acutally higher than other icons and look oval instead of rounded... Here is how it looks like: https://i.sstatic.net/AajpO.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;
}

Upvotes: 0

Views: 2659

Answers (1)

C3roe
C3roe

Reputation: 96306

If you want them all to be the same size, then you should not let the size of the icon character determine the width and height of each element, but set a width and height explicitly (this will need display:inline-block as well for width and height to take effect).

Upvotes: 1

Related Questions