resolving #704

build/_includes/tests/stacked-icons.html

@@ -0,0 +1,51 @@
+<p>
+  <span class="icon-stack">
+    <i class="icon-sign-blank icon-stack-base"></i>
+    <i class="icon-twitter icon-light"></i>
+  </span>
+  Twitter Icon
+  <span class="icon-stack">
+    <i class="icon-sign-blank icon-stack-base"></i>
+    <i class="icon-facebook icon-light"></i>
+  </span>
+  Facebook Icon
+  <span class="icon-stack">
+    <i class="icon-sign-blank icon-stack-base"></i>
+    <i class="icon-github icon-light"></i>
+  </span>
+  GitHub Icon
+</p>
+<p>
+  <span class="icon-stack">
+    <i class="icon-circle icon-stack-base"></i>
+    <i class="icon-twitter icon-light"></i>
+  </span>
+  Twitter Icon
+  <span class="icon-stack">
+    <i class="icon-circle icon-stack-base"></i>
+    <i class="icon-facebook icon-light"></i>
+  </span>
+  Facebook Icon
+  <span class="icon-stack">
+    <i class="icon-circle icon-stack-base"></i>
+    <i class="icon-github icon-light"></i>
+  </span>
+  GitHub Icon
+</p>
+<p>
+  <span class="icon-stack">
+    <i class="icon-circle-blank icon-stack-base"></i>
+    <i class="icon-twitter"></i>
+  </span>
+  Twitter Icon
+  <span class="icon-stack">
+    <i class="icon-circle-blank icon-stack-base"></i>
+    <i class="icon-facebook"></i>
+  </span>
+  Facebook Icon
+  <span class="icon-stack">
+    <i class="icon-circle-blank icon-stack-base"></i>
+    <i class="icon-github"></i>
+  </span>
+  GitHub Icon
+</p>

build/_layouts/base.html

@@ -59,7 +59,7 @@
 <script src="{{ site.baseurl }}assets/js/backbone.min.js"></script>
 <script src="{{ site.baseurl }}assets/js/prettify.min.js"></script>
 <script src="{{ site.baseurl }}assets/js/bootstrap-2.3.1.min.js"></script>
-<script src="{{ site.baseurl }}assets/js/index/index.js"></script>
+<script src="{{ site.baseurl }}assets/js/site.js"></script>
 
 </body>
 </html>

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

@@ -24,7 +24,7 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('../font/fontawesome-webfont.eot?v=3.0.1');
+  src: url('../font/fontawesome-webfont.eot?v=3.1.0');
   src: url('../font/FontAwesome.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
@@ -46,6 +46,11 @@
   display: inline-block;
   speak: none;
 }
+/* makes the font 33% larger relative to the icon container */
+.icon-large:before {
+  vertical-align: -10%;
+  font-size: 1.3333333333333333em;
+}
 /* makes sure icons active on rollover in links */
 a [class^="icon-"],
 a [class*=" icon-"] {
@@ -82,6 +87,12 @@ ul.icons-ul > li .icon-li {
 .icon-muted {
   color: #eeeeee;
 }
+.icon-light {
+  color: #ffffff;
+}
+.icon-dark {
+  color: #333333;
+}
 .icon-border {
   border: solid 1px #eeeeee;
   padding: .2em .25em .15em;
@@ -170,11 +181,6 @@ ul.icons-ul > li .icon-li {
 .dropdown-submenu:hover > a > [class*=" icon-"] {
   background-image: none;
 }
-/* makes the font 33% larger relative to the icon container */
-.icon-large:before {
-  vertical-align: -10%;
-  font-size: 1.3333333333333333em;
-}
 /* keeps Bootstrap styles with and without icons the same */
 .btn [class^="icon-"],
 .nav [class^="icon-"],
@@ -240,6 +246,31 @@ ul.icons-ul > li .icon-li {
 }
 /* EXTRAS
  * -------------------------- */
+/* Stacked and layered icon */
+.icon-stack {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: -35%;
+}
+.icon-stack [class^="icon-"],
+.icon-stack [class*=" icon-"] {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  font-size: 1em;
+  line-height: inherit;
+}
+.icon-stack .icon-stack-base {
+  width: inherit;
+  height: inherit;
+  font-size: 2em;
+  line-height: inherit;
+}
+/* Animated rotating icon */
 .icon-spin {
   display: inline-block;
   -moz-animation: spin 2s infinite linear;
@@ -287,8 +318,8 @@ ul.icons-ul > li .icon-li {
     transform: rotate(359deg);
   }
 }
-/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-    readers do not read off random characters that represent icons */
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
 .icon-glass:before {
   content: "\f000";
 }

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

@@ -32,12 +32,6 @@
   background-image: none;
 }
 
-/* makes the font 33% larger relative to the icon container */
-.icon-large:before {
-  vertical-align: -10%;
-  font-size: 4/3em;
-}
-
 /* keeps Bootstrap styles with and without icons the same */
 .btn, .nav {
   [class^="icon-"],

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

@@ -18,7 +18,13 @@
   speak: none;
 }
 
-/* makes sure icons active on rollover in links */
+/* makes the font 33% larger relative to the icon container */
+.icon-large:before {
+  vertical-align: -10%;
+  font-size: 4/3em;
+}
+
+  /* makes sure icons active on rollover in links */
 a {
   [class^="icon-"],
   [class*=" icon-"] {
@@ -60,9 +66,9 @@ ul.icons-ul {
   }
 }
 
-.icon-muted {
-  color: @iconMuted;
-}
+.icon-muted { color: @iconMuted; }
+.icon-light { color: @iconLight; }
+.icon-dark { color: @iconDark; }
 
 // Icon Borders
 // -------------------------

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

@@ -1,6 +1,10 @@
 /* EXTRAS
  * -------------------------- */
 
+/* Stacked and layered icon */
+.icon-stack();
+
+/* Animated rotating icon */
 .icon-spin {
   display: inline-block;
   -moz-animation: spin 2s infinite linear;

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

@@ -1,5 +1,5 @@
-/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-    readers do not read off random characters that represent icons */
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
 .icon-glass:before                { content: "\f000"; }
 .icon-music:before                { content: "\f001"; }
 .icon-search:before               { content: "\f002"; }

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

@@ -6,3 +6,29 @@
   -moz-border-radius: @radius;
   border-radius: @radius;
 }
+
+.icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
+  .icon-stack {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    width: @width;
+    height: @height;
+    line-height: @width;
+    vertical-align: -35%;
+    [class^="icon-"],
+    [class*=" icon-"] {
+      position: absolute;
+      width: inherit;
+      height: inherit;
+      font-size: @top-font-size;
+      line-height: inherit;
+    }
+    .icon-stack-base {
+      width: inherit;
+      height: inherit;
+      font-size: @base-font-size;
+      line-height: inherit;
+    }
+  }
+}

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

@@ -3,15 +3,14 @@
 
 @font-face {
   font-family: 'FontAwesome';
-  src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=3.0.1');
-  //  src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
-  //    url('@{FontAwesomePath}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
-  //    url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
-  //    url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=3.0.1') format('svg');
+  src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=@{FontAwesomeVersion}');
+  //  src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=@{FontAwesomeVersion}') format('embedded-opentype'),
+  //    url('@{FontAwesomePath}/fontawesome-webfont.woff?v=@{FontAwesomeVersion}') format('woff'),
+  //    url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=@{FontAwesomeVersion}') format('truetype');
+  //    url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=@{FontAwesomeVersion}') format('svg');
 
   src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype');
 
   font-weight: normal;
   font-style: normal;
 }
-

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

@@ -1,6 +1,9 @@
 // Variables
 // --------------------------
 
-@FontAwesomePath:   "../font";
-@borderColor:       #eee;
-@iconMuted:         #eee;
+@FontAwesomePath:    "../font";
+@FontAwesomeVersion: "3.1.0";
+@borderColor:        #eee;
+@iconMuted:          #eee;
+@iconLight:          #fff;
+@iconDark:           #333;

build/test.html

@@ -581,4 +581,12 @@ title: Font Awesome Visual Test Cases
     <button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
   </div>
 
+  <h3>Stacked icons</h3>
+  <div class="well">
+    {% include tests/stacked-icons.html %}
+  </div>
+  <div class="well lead">
+    {% include tests/stacked-icons.html %}
+  </div>
+</div>
 </section>