Adding custom wordpress menu with custom html for icon fonts

Question

I'm going to be using icon fonts for my social media navigation, but i need some much more custom HTML to implement these for my theme. The HTML i need to use looks roughly like this:

<a href="#" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader-text">RSS</span>
</a>

Now, would i be better just manually hard baking this into the theme? I would like to add some sort of support for changing some icons around to a specific few, but i'm not sure how to best implement this so that i can control what classes are being applied. I would prefer a section in the admin where i could control them. Pointers?

Thanks.

Answer 1

You could try jquery to do this. There will be an existing class to a wp nav anchor so you can use it.

<script>
$(function(){
    $("a.menu_class").addClass("icon-alone");
    $("a.menu_class").attr("href","#");     
    $("a.menu_class").html('<span aria-hidden="true" data-icon="&#x25a8;"></span><span class="screen-reader-text">RSS</span>');
});
</script>