This is a tough one. Normally I’d say use text-indent:-99999px;
as part of the markup for <a>
— to get that link text off the screen. But you have that fa
italic tag which is really text as well – so it gets shifted off the screen, too.
This solution is pretty ugly but you can probably tweak it for your use.
Wrap the social links inside a div:
<div id="social-wrapper">
<a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook circle"></i>Facebook</a>
<a href="http://www.google.com/" target="_blank"><i class="fa fa-google-plus circle"></i>Google</a>
<a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter circle"></i>Twitter</a>
<a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin circle"></i>LinkedIn</a>
</div>
Then, .css like this:
#social-wrapper .fa {
color: #000;
}
#social-wrapper a {
color: transparent;
display: inline-block;
margin: 0 8px;
overflow: hidden;
width: 15px;
}
Set that width to accommodate your .fa icon width. Here is a jsfiddle that shows how it works.
EDIT:
ok, didn’t realize you couldn’t get the above solution to work. Here’s a less ugly version, still just using CSS. Anything beyond this and you will need to write your own implementation of wp_nav_menu
to get the content the way you want it and not rely on a css solution.
Same HTML as above, with a wrapper div.
This CSS:
#social-wrapper {
text-indent: -99999px;
}
#social-wrapper a {
width: 30px;
float: left;
}
#social-wrapper .fa {
display: inline-block;
vertical-align: middle;
width: 0;
text-indent: 99999px;
}
And here’s another fiddle showing how it works.