Menu icon instead of text – Customizr

A lot of resources googlin’ for it:
https://www.ads-software.com/support/topic/change-home-button-from-text-to-picture?replies=2
https://jasonbradley.me/icons-in-the-wordpress-menu/
https://premium.wpmudev.org/blog/wordpress-custom-menu-icons/
..

And as you can see isn’t related to customizr ??

Thanks.

After A bit of tweaking, I’ve managed to get it working using the following code.
I’m using the latest versions of WP (3.9.1) and Customizr (3.1.12)

Replace the Navigation Label with the following:

<i class='icon-home'></i>

And then add this to the Custom CSS section of the Customizr theme:

/* This code styles the Home icon in menu */
.icon-home {opacity: 0.55;}
.icon-home:hover {opacity: 0.8;}

This shows the bootstrap home icon in the menu and matches the colour of the other menu items and shows a darker shade of grey on hover.

I want to take it further and show the skin colour on hover, but I don’t think I can change the colour of the icons in Bootstrap 2.3.2 (which this theme is based on) – I’ve tried.
I’ve tried using the Font Awesome plugin (v3.5), as this has icons that can have colour styles applied, but can’t get it to work.
Am I missing something obvious? Does this plugin work with Customizr, as it’s designed to work with Bootstrap 3.0.0?

Any further pointers would be greatly appreciated.

You can always use entypo fonts, for example if you know the id of that menu item (or the class), you can place this in your child-theme style.css:

#menu-item-137 a:before {
content: "\2302";
float: left;
font-family: "entypo";
padding-right: 3px; /*change this value*/
font-size: 30px; /*change this value*/
}

Hope this helps

Thanks, I’ll explore that option.