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!
