Bootstrap carets to FontAwesome directional icons change

[magicdesign]

Best menu ever!

Sorry for my English (Google Translate :))

I use SuperMenus Bootstrap Addon with Yamm3 mega menu. Everything works fine, but i want to replace Bootstrap default carets with FontAwesome directional icons. For example: down caret to angle-down icon, and right caret to angle-right icon, or any other icon.

Thanks.

[admin]

Hi,

By default the carets span.caret are required as they are used as toggle buttons in collapsible mode so you need to use them in any case. So you could achieve it by adding both icons in the menu items – e.g.:

<li><a href="#">Dropdown <i class="fa fa-angle-down"></i><span class="caret"></span></a>...

and then showing the FontAwesome one in desktop mode and the Bootstrap default caret in collapsible mode with something like this:

.navbar-nav .fa {
	display: none;
}
@media (min-width:768px) {
	.navbar-nav .fa {
		display: inline-block;
	}
	.navbar-nav .caret {
		display: none;
	}
}

768px is the default Bootstrap breakpoint that triggers collapsible mode so if you use a custom breakpoint width for that, you may need to change it.

Cheers!

[magicdesign]

Yes. Just fine. Simple and effective.

Thank you very much.

[Author]

Posts