Bootstrap carets to FontAwesome directional icons change

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #2617
    magicdesign
    Participant

    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.

    #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!

    #2621
    magicdesign
    Participant

    Yes. Just fine. Simple and effective.

    Thank you very much.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?