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 11 months, 1 week ago.

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

    dmcleod87
    Participant
    Post count: 53

    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 http://dev.dylanmcleod.net.au/us-explained/
    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="mailto:amcgennissdestro@gmail.com" target="_blank">[icon name=icon-envelope]</a></li>
    <li><a class="social-links" href="http://www.catwalkofwords.com" target="_blank">[icon name=icon-laptop]</a></li>
    <li><a class="social-links" href="http://www.facebook.com/catwalkofwords" target="_blank">[icon name=icon-facebook</a></li>
    <li><a class="social-links" href="https://twitter.com/CatwalkofWords" target="_blank">[icon name=icon-twitter]</a></li>
    <li><a class="social-links" href="http://instagram.com/catwalkofwords#" target="_blank">[icon name=icon-instagram]</a></li>
    </ul>
    </div>

    CSS – http://d.pr/f/gDqz
    Font-Awesome CSS – http://d.pr/f/nSxR

    http://dev.dylanmcleod.net.au/us-explained/
    #72706

    David Chu
    Participant
    Post count: 1371

    Hi,
    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 a.social-links {
    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


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #72795

    dmcleod87
    Participant
    Post count: 53

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

    #72808

    David Chu
    Participant
    Post count: 1371

    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.