Hi Zac,
Did you find a way to add "fa" icons to the custom menu?
Hi Zac,
I'd be happy to know too if you have found a solution.
Thanks,
Robin
You should be able to do this for the top menubar using CSS.
.navbar .nav li:nth-child(2) a:before {
content: "\f0f4";
font-family: FontAwesome;
margin: 0 3px;
}
.navbar .nav li:nth-child(3) a:before {
content: "\f0f5";
font-family: FontAwesome;
margin: 0 3px;
}
.navbar .nav li:nth-child(4) a:before {
content: "\f0f6";
font-family: FontAwesome;
margin: 0 3px;
}
You would need to choose which icons you wanted though as the example given above is random.
Cheers
Mary
Hi Mary,
Thanks, this works with the exception that it also displays the icon for submenu's as well. So if I'm using nth-child(2), for all second items on the sub-menu it would display it as well.
Is there a workaround to only display it on the menu's but not sub-menus?
Thanks,
Robin
Never mind. Solved my own problem using the greater than sign.
.navbar .nav > li:nth-child(3) a:before {
content: "\f0f5";
font-family: FontAwesome;
margin: 0 3px;
}
I do have another question, might be an easy one for you to answer. But hard for me.
I want a space between text and the icon. How can I do that easily?
Thanks.
Increase the margin from 3px to 5px
or remove the one I added margin: 0 3px; and use
margin-right: 5px;
instead.
Mary
Hi Mary,
I use theme's CLEAN and I customize CSS following you guide. But Menu's Icons don't show.
I think It is error about font: FontAwesome. Can you guide me to config CSS?
Thanks.
Hi,
If you have not added FontAwesome to your theme then it will not work as you need to add the font file first!
So download the font from HERE
Next read how to add the font in this Moodle tutorial: How to add custom fonts in a theme.
As well as adding the font files for FontAwesome you will also need to add the CSS for those fonts too.
The CSS in this case comes with the downloaded files.
Cheers
Mary