Reply To: Bootstrap carets to FontAwesome directional icons change

Home Forums Older releases 1.0.x + Bootstrap addon Bootstrap carets to FontAwesome directional icons change Reply To: Bootstrap carets to FontAwesome directional icons change

#2620
admin
Keymaster

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!

Register

You will be emailed a link to set your password.

Login

Lost password?