adding split dropdown for icons and examples

build/_includes/icons/brand.html

@@ -1,4 +1,4 @@
-<section id="icons-brand" class="row">
+<section id="brand" class="row">
   <div class="span12">
     <h2 class="page-header">Brand Icons</h2>
   </div>

build/_includes/icons/directional.html

@@ -1,4 +1,4 @@
-<section id="icons-directional" class="row">
+<section id="directional" class="row">
   <div class="span12">
     <h2 class="page-header">Directional Icons</h2>
   </div>

build/_includes/icons/medical.html

@@ -1,4 +1,4 @@
-<section id="icons-medical" class="row">
+<section id="medical" class="row">
   <div class="span12">
     <h2 class="page-header">Medical Icons</h2>
   </div>

build/_includes/icons/new.html

@@ -1,4 +1,4 @@
-  <section id="icons-new">
+  <section id="new">
   {% if page.navbar_active == "icons" %}
   <div class="row">
     <div class="span8">

build/_includes/icons/text-editor.html

@@ -1,4 +1,4 @@
-<section id="icons-text-editor" class="row">
+<section id="text-editor" class="row">
   <div class="span12">
     <h2 class="page-header">Text Editor Icons</h2>
   </div>

build/_includes/icons/video-player.html

@@ -1,4 +1,4 @@
-<section id="icons-video-player" class="row">
+<section id="video-player" class="row">
   <div class="span12">
     <h2 class="page-header">Video Player Icons</h2>
   </div>

build/_includes/icons/web-application.html

@@ -1,5 +1,5 @@
 
-<section id="icons-web-app" class="row">
+<section id="web-application" class="row">
   <div class="span12">
     <h2 class="page-header">Web Application Icons</h2>
   </div>

build/_includes/navbar.html

@@ -5,14 +5,31 @@
       <ul class="nav">
         <li{% if page.navbar_active == "home" %} class="active"{% endif %}><a href="{{ page.relative_path }}">Home</a></li>
         <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
-        <li{% if page.navbar_active == "icons" %} class="active"{% endif %}><a href="{{ page.relative_path }}icons/">Icons</a></li>
+        <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
-        <li{% if page.navbar_active == "examples" %} class="active"{% endif %}><a href="{{ page.relative_path }}examples/">Examples</a></li>
+        <li class="dropdown dropdown-split-right{% if page.navbar_active == "icons" %} active{% endif %}">
-        <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-            <b class="caret"></b>
+          <i class="icon-caret-down"></i>
         </a>
         <ul class="dropdown-menu pull-right">
-            <li class="nav-header">Examples</li>
+          <li><a href="{{ page.relative_path }}icons/">Icons</a></li>
+          <li class="divider"></li>
+          <li><a href="{{ page.relative_path }}icons/#new">New Icons in {{ site.font_awesome.version }}</a></li>
+          <li><a href="{{ page.relative_path }}icons/#web-application">Web Application Icons</a></li>
+          <li><a href="{{ page.relative_path }}icons/#text-editor">Text Editor Icons</a></li>
+          <li><a href="{{ page.relative_path }}icons/#directional">Directional Icons</a></li>
+          <li><a href="{{ page.relative_path }}icons/#video-player">Video Player Icons</a></li>
+          <li><a href="{{ page.relative_path }}icons/#brand">Brand Icons</a></li>
+          <li><a href="{{ page.relative_path }}icons/#medical">Medical Icons</a></li>
+        </ul>
+        </li>
+        <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
+        <li class="dropdown dropdown-split-right{% if page.navbar_active == "examples" %} active{% endif %}">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <i class="icon-caret-down"></i>
+          </a>
+          <ul class="dropdown-menu pull-right">
+            <li><a href="{{ page.relative_path }}examples/">Examples</a></li>
+            <li class="divider"></li>
             <li><a href="{{ page.relative_path }}examples/#new-styles">New Styles</a></li>
             <li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
             <li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
@@ -34,7 +51,7 @@
         <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
       </ul>
       <ul class="nav pull-right">
-        <li><a href="mailto:{{ site.font_awesome.author.email }}"><i class="icon-envelope"></i> Me</a></li>
+        <li><a href="mailto:{{ site.font_awesome.author.email }}"><i class="icon-envelope"></i>&nbsp; Me</a></li>
       </ul>
     </div>
   </div>

build/assets/css/site.css

@@ -5795,6 +5795,16 @@ section {
   list-style-type: none;
   margin: 0;
 }
+.the-icons li [class^="icon-"],
+.the-icons li [class*=" icon-"] {
+  display: inline-block;
+  width: 1.2857142857142858em;
+  text-align: center;
+}
+.the-icons li [class^="icon-"].icon-large,
+.the-icons li [class*=" icon-"].icon-large {
+  width: 1.5714285714285714em;
+}
 .the-icons li a {
   display: block;
   cursor: pointer;
@@ -5897,3 +5907,9 @@ footer ul {
 footer .project {
   margin-top: 10px;
 }
+.navbar .nav > li.dropdown-split-right > a {
+  padding-left: 7px;
+}
+.navbar .nav > li.dropdown-split-left > a {
+  padding-right: 0;
+}

build/assets/font-awesome/css/font-awesome.css

@@ -61,18 +61,14 @@ a [class*=" icon-"]:before {
   display: inline;
 }
 /* increased font size for icon-large */
-li [class^="icon-"],
+[class^="icon-"].icon-fixed-width,
-.nav li [class^="icon-"],
+[class*=" icon-"].icon-fixed-width {
-li [class*=" icon-"],
-.nav li [class*=" icon-"] {
   display: inline-block;
   width: 1.2857142857142858em;
   text-align: center;
 }
-li [class^="icon-"].icon-large,
+[class^="icon-"].icon-fixed-width.icon-large,
-.nav li [class^="icon-"].icon-large,
+[class*=" icon-"].icon-fixed-width.icon-large {
-li [class*=" icon-"].icon-large,
-.nav li [class*=" icon-"].icon-large {
   width: 1.5714285714285714em;
 }
 ul.icons-ul {

build/assets/font-awesome/less/core.less

@@ -33,9 +33,9 @@ a {
 }
 
 /* increased font size for icon-large */
-li, .nav li {
 [class^="icon-"],
 [class*=" icon-"] {
+  &.icon-fixed-width {
     display: inline-block;
     width: 18/14em;
     text-align: center;

build/assets/less/site.less

@@ -1,5 +1,5 @@
 @import "twbs-2.3.1/bootstrap.less";
-@import "twbs-2.3.1/.less";
+@import "twbs-2.3.1/responsive-utilities.less";
 @import "sticky-footer.less";
 
 @import "mixins.less";
@@ -224,6 +224,15 @@ section {
   list-style-type: none;
   margin: 0;
   li {
+    [class^="icon-"],
+    [class*=" icon-"] {
+      display: inline-block;
+      width: 18/14em;
+      text-align: center;
+      &.icon-large {
+        width: 22/14em;
+      }
+    }
     a {
       display: block;
       &, &:hover { color: @grayDarker; }
@@ -344,3 +353,10 @@ footer {
 
   .project { margin-top: 10px; }
 }
+
+// makes dropdowns closer for split dropdown
+// Links
+.navbar .nav > li {
+  &.dropdown-split-right > a { padding-left: 7px; }
+  &.dropdown-split-left > a { padding-right: 0; }
+}

build/icons/index.html

@@ -12,7 +12,7 @@ relative_path: ../
 
 <div class="container">
   {% include icons/new.html %}
-  {% include icons/web-app.html %}
+  {% include icons/web-application.html %}
   {% include icons/text-editor.html %}
   {% include icons/directional.html %}
   {% include icons/video-player.html %}