Putting <a> tag outside <li> tag on generated Menu

Question

I'm trying to make a social links menu for the footer in my theme. I want a menu to be customisable in Dashboard, I want the links to be relative to what's put in there.

Originally to get that, I did this:

<a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook circle"></i></a>
<a href="http://www.google.com/" target="_blank"><i class="fa fa-google-plus circle"></i></a>
<a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter circle"></i></a>
<a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin circle"></i></a>

For hard-coded menu items.

Now, I want to use

<?php wp_nav_menu( array( 'theme_location' => 'social' ) ); ?>

To generate the <li> but realise that doing so puts the link label, i.e. Facebook inside the <li><a> tags.

i.e. <li class="fa fa-facebook circle"><a href="fb.com">Facebook</a></li>

Which isn't that great because 1. Facebook label gets in the way and 2. is the only thing that is clickable.

I want to get the link tag on the outside of my classes (being set automatically by Wordpress too through Menu customisation)

I realise I could write the <i> class inside the label for each menu item, but that defeats the purpose I'm going after here.

Edit: I'd love a solution that doesn't exclude hacking in some way.

Answer 1

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.

Answer 2

My solution was strange. A little hacky, and going with CC's solution worked, but I think it was being bugged by something else in my footer. (I'm silly)

#social_area {
    li a {
        display: block;
        color: transparent;
        overflow: hidden;
        margin-top: -45px;
        width: 100%;
    }
}

Where HTML looked a little like this.

<ul id="menu-social-media">
    <li class="fa fa-facebook circle"><a title="Facebook" target="_blank" href="http://www.facebook.com/">Facebook</a></li>
    <li class="fa fa-instagram circle"><a title="Instagram" target="_blank" href="http://www.instagram.com/">Instagram</a></li>
    <li class="fa fa-pinterest circle"><a title="Pinterest" target="_blank" href="http://au.pinterest.com/">Pinterest</a></li>
    <li class="fa fa-yelp circle"><a title="Yelp" target="_blank" href="http://www.yelp.com/">Yelp</a></li>
</ul>

Surrounded by the #social_area div.

I think I spent an hour trying to get this to work but it was another element's style that was ruining it. (Why won't this shit work!?)

Thanks CC!