Putting tag outside tag on generated Menu

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.