centering font awesome font icons

Community Forums Forums Design Tips and Tricks centering font awesome font icons

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  David Chu 2 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #72652


    hi all,

    i’m using the font awesome plugin for some social media icons but having a little trouble with the alignment. if you visit this page
    you will notice that the font icons aren’t in the center of the circle. i’ve been using trial and error with editing the css but just can’t figure it out. the html is below and links to the css are below that. hopefully someone can point me in the right direction!

    <div class="social-links-container">
    <ul class="aligncenter">
    <li><a class="social-links" href="" target="_blank">[icon name=icon-envelope]</a></li>
    <li><a class="social-links" href="" target="_blank">[icon name=icon-laptop]</a></li>
    <li><a class="social-links" href="" target="_blank">[icon name=icon-facebook</a></li>
    <li><a class="social-links" href="" target="_blank">[icon name=icon-twitter]</a></li>
    <li><a class="social-links" href="" target="_blank">[icon name=icon-instagram]</a></li>

    CSS –
    Font-Awesome CSS –

    David Chu

    That’s a very tricky CSS problem, just the stuff I enjoy. That’s really tough to dial in. As you’ve seen, zillions of competing bits of code. The quickest result that looked decent that I found was to use the padding setting below instead of 10px:

    .page-id-2 .entry-content .social-links-container {
    background-color: #000000 !important;
    border-bottom: 0 solid #FFFFFF !important;
    border-radius: 40px !important;
    color: #FFFFFF !important;
    font-size: 30px !important;
    padding: 14px 9px 10px 16px;
    text-align: center !important;

    Not a perfect circle, but decent triage. There are several other bits of CSS code for those links, so the padding command may work elsewhere, too. Otherwise, hours more fiddling. Changing the font size of the link would allow more exactitude, but would require many more code changes, I think.

    Good luck,

    Dave Chu · Custom WordPress Developer – likes collaborating with Designers



    thanks dave! way better than i had. will keep experimenting and see if i can improve.


    David Chu

    Sounds good! I might mess around with that FontAwesome stuff myself – I enjoy typography, and it looks fun. I never warmed to Cufon and other early ones – too much hassle and breakage of other site parts.

    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.