<ul id="main-nav" class="pull-right"> -- ALL ITEMS GO HERE -- </ul>
<li> <a href="javascript:;"> <i class="icon-home"></i> <span>Home</span> </a> </li>
NOTE: Be sure to add the class .nav-icon
to the top-level LI element and wrap your link text in a span
tag so it's hidden.
<li class="nav-icon"> <a href="javscript:;"> <i class="icon-home"></i> <span>Home</span> </a> </li>
<li class="dropdown"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> <span>span>Dropdown</span> <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Dropdown 1</a></li> <li><a href="#">Dropdown 2</a></li> </ul> </li>
<li class="dropdown"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> Multi-Level Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="javascript:;">Dropdown #1</a></li> <li><a href="javascript:;">Dropdown #2</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Dropdown menu</a> <ul class="dropdown-menu"> <li> <a tabindex="-1" href="#">Second level link</a> </li> <li> <a tabindex="-1" href="#">Second level link</a> </li> <li> <a tabindex="-1" href="#">Second level link</a> </li> </ul> </li> </ul> </li>