centering font awesome font icons

[dmcleod87]

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:[email protected]" 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/

[David Chu]

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

[dmcleod87]

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

[Author]

Posts