Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Kevin Korte
Kevin Korte
28,149 Points
Posted by Kevin Korte
Kevin Korte
28,149 Points

Wordpress nav and iconfonts

I already go this coded up and working in a static prototype, how do I get it to work in WP?

I'm using some selected iconfonts from the IcoMoon app. To generate my WP menu im using 

wp_nav_menu();

what I need the output to look like is something like this for the home button.

<li><a href="#"><span data-icon="&#xe001;" aria-hidden="true" class="visuallyhidden">Home</span></a></li>

Any help, hints or suggestions to doing this. The home button is the only menu item that will have an iconfont for now anyway.

Thanks.

3 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

I'm not too hot on hooks and actions so can't advise on that route, IF there is a route like that to go down.

One way would be to use jQuery and append, then just type in the above attribute. I think that'll work but again, I'm not that awesome at jQuery.

http://api.jquery.com/append/

Gautam Thapar
Gautam Thapar
5,265 Points
Gautam Thapar
Gautam Thapar
5,265 Points

You can add a css class to your home link from under menu.

And then apply style to that class like -

.home-icon{
    &:before{
        font-family: 'icomoon';
        content: '\xe001';
    }
}

It works fine for me, hope it works for you too.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Doh! Thanks for the answers guys! Got her working no problem. Ended up going the CSS route over the JS only because few but some still might be browsing around without JS on.

I was way overthinking this problem. I was trying to solve it server side with php. Many thanks again!