major overhaul to icon pages

_config.yml

@@ -9,6 +9,8 @@ source:           build
 destination:      _gh_pages
 plugins:          build/_plugins
 
+pygments:         true
+
 icon_meta:        build/icons.yml
 icon_layout:      icon.html    # Relative to _layouts directory
 icon_destination: icon         # Relative to destination

build/_includes/ads/carbon-light-vertical.html

@@ -0,0 +1 @@
+<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>

build/_includes/examples.html

@@ -1,6 +1,5 @@
 <section id="examples">
-<h2 class="page-header">Examples</h2>
-<p>Many examples re-used from the Twitter Bootstrap documentation.</p>
+<h3 class="page-header">Many examples appreciatively re-used from the <a href="{{ site.bootstrap.url }}">Bootstrap documentation</a>.</h3>
 <div class="row">
   <div class="span4">
     <div class="well well-transparent">
@@ -95,7 +94,7 @@
   </div>
   <div class="span4">
     <p>
-      <a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
+      <a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version {{ site.font-awesome.version }}</a>
     </p>
     <a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
   </div>
@@ -178,14 +177,6 @@
     </p>
   </div>
 </div>
-<div class="row">
-  <div class="span3">
-
-  </div>
-  <div class="span9">
-
-  </div>
-</div>
 <div class="row">
   <div class="span12">
     <h4>Bordered & Pulled Icons</h4>
@@ -243,7 +234,7 @@ Use a few of the new styles together ... lots of new possibilities.
         <i class="icon-cog"></i> Settings</a>
     </p>
     <p>
-      <a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
+      <a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version {{ site.font-awesome.version }}</a>
     </p>
     <p>
       <a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

build/_includes/footer.html

@@ -11,7 +11,7 @@
       Documentation licensed under <a href="{{ site.license.documentation.url }}">{{ site.license.documentation.version }}</a>
     </div>
     <div>
-      Many doc examples taken from <a href="{{ site.bootstrap.url }}">Bootstrap's docs</a>
+      Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN for Font Awesome</a>
     </div>
     <div class="project">
       <a href="{{ site.font-awesome.github.url }}">GitHub Project</a> &middot;

build/_includes/icons/new.html

@@ -43,6 +43,7 @@
       <li><a href="{{ site.baseurl }}icon/calendar-empty"><i class="icon-calendar-empty"></i> icon-calendar-empty</a></li>
       <li><a href="{{ site.baseurl }}icon/fire-extinguisher"><i class="icon-fire-extinguisher"></i> icon-fire-extinguisher</a></li>
       <li><a href="{{ site.baseurl }}icon/rocket"><i class="icon-rocket"></i> icon-rocket</a></li>
+      <li><a href="{{ site.baseurl }}icon/maxcdn"><i class="icon-maxcdn"></i> icon-maxcdn</a></li>
     </ul>
   </div>
 </section>

build/_includes/roadmap.html

@@ -1,5 +1,4 @@
 <section id="roadmap">
-  <h2 class="page-header">Roadmap</h2>
   <p>Here's the plan for future updates.</p>
   <ul class="icons">
     <li><i class="icon-plus"></i>Easier sub-setting with icon packs.</li>

build/_layouts/icon.html

@@ -2,38 +2,107 @@
 layout: base
 title_prefix: Font Awesome Icons
 ---
+<div class="jumbotron jumbotron-icon">
+  <div class="container">
+    <div class="info-icons">
+      <i class="icon-{{ page.icon['id'] }} icon-6"></i>&nbsp;&nbsp;
+      <i class="icon-{{ page.icon['id'] }} icon-5"></i>&nbsp;&nbsp;
+      <i class="icon-{{ page.icon['id'] }} icon-4"></i>&nbsp;&nbsp;
+      <i class="icon-{{ page.icon['id'] }} icon-3"></i>&nbsp;&nbsp;
+      <i class="icon-{{ page.icon['id'] }} icon-2"></i>&nbsp;&nbsp;
+      <i class="icon-{{ page.icon['id'] }} icon-1"></i>
+    </div>
+    <h1 class="info-class">
+      icon-{{ page.icon['id'] }}
+      <small>
+        <i class="icon-{{ page.icon['id'] }}"></i> &middot;
+        Unicode: {{ page.icon['unicode'] }} &middot;
+        Created: v{{ page.icon['created'] }} &middot;
+        Categories:
+        {% for category in page.icon['categories'] %}
+          {{ category }}{% unless forloop.last %},{% endunless %}
+        {% endfor %}
+        {% if page.icon['aliases'] %}
+          Aliases:
+          {% for alias in page.icon['aliases'] %}
+            {{ alias }}{% unless forloop.last %},{% endunless %}
+          {% endfor %}
+        {% endif %}
+      </small>
+    </h1>
+
+
+    <!--<div class="row-fluid">-->
+      <!--<div class="span6">-->
+        <!--<div class="info-icons">-->
+          <!--<i class="icon-{{ page.icon['id'] }} icon-5"></i>-->
+          <!--<i class="icon-{{ page.icon['id'] }} icon-4"></i>-->
+          <!--<i class="icon-{{ page.icon['id'] }} icon-3"></i>-->
+          <!--<i class="icon-{{ page.icon['id'] }} icon-2"></i>-->
+          <!--<i class="icon-{{ page.icon['id'] }} icon-1"></i>-->
+        <!--</div>-->
+        <!--&lt;!&ndash;<p class="info-class">icon-{{ page.icon['id'] }}</p>&ndash;&gt;-->
+      <!--</div>-->
+      <!--<div class="span6">-->
+        <!--<div class="info-details">-->
+          <!--<h1>icon-{{ page.icon['id'] }}</h1>-->
+          <!--<dl class="dl-horizontal">-->
+            <!--<dt>Icon</dt>-->
+            <!--<dd><i class="icon-{{ page.icon['id'] }}"></i></dd>-->
+
+            <!--<dt>Unicode</dt>-->
+            <!--<dd>{{ page.icon['unicode'] }}</dd>-->
+
+            <!--<dt>Created</dt>-->
+            <!--<dd>v{{ page.icon['created'] }}</dd>-->
+
+            <!--{% if page.icon['categories'] %}-->
+            <!--<dt>Categories</dt>-->
+            <!--<dd>-->
+              <!--{% for category in page.icon['categories'] %}-->
+              <!--{{ category }}<br>-->
+              <!--{% endfor %}-->
+            <!--</dd>-->
+            <!--{% endif %}-->
+
+            <!--{% if page.icon['aliases'] %}-->
+            <!--<dt>Aliases</dt>-->
+            <!--<dd>-->
+              <!--{% for alias in page.icon['aliases'] %}-->
+              <!--{{ alias }}<br>-->
+              <!--{% endfor %}-->
+            <!--</dd>-->
+            <!--{% endif %}-->
+          <!--</dl>-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
+
+
+
+  </div>
+</div>
+
+
 <div class="container">
   <section>
-    <dl class="dl-horizontal">
-      <dt>Icon</dt>
-      <dd><i class="icon-{{ page.icon['id'] }}"></i></dd>
-
-      <dt>Icon Class</dt>
-      <dd>icon-{{ page.icon['id'] }}</dd>
-
-      <dt>Unicode</dt>
-      <dd>{{ page.icon['unicode'] }}</dd>
-
-      <dt>Created</dt>
-      <dd>v{{ page.icon['created'] }}</dd>
-
-    {% if page.icon['categories'] %}
-      <dt>Categories</dt>
-      <dd>
-      {% for category in page.icon['categories'] %}
-        {{ category }}<br>
-      {% endfor %}
-      </dd>
-    {% endif %}
-
-    {% if page.icon['aliases'] %}
-      <dt>Aliases</dt>
-      <dd>
-      {% for alias in page.icon['aliases'] %}
-        {{ alias }}<br>
-      {% endfor %}
-      </dd>
-    {% endif %}
-    </dl>
+    <div class="row-fluid">
+      <div class="span9">
+        <p>After you get <a href="{{ site.baseurl }}integration/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
+        <div class="well well-transparent">
+          <div style="font-size: 24px; line-height: 1.5em;">
+            <i class="icon-{{ page.icon['id'] }}"></i> icon-{{ page.icon['id'] }}
+          </div>
+        </div>
+{% highlight html %}
+<i class="icon-{{ page.icon['id'] }}"></i> icon-{{ page.icon['id'] }}
+{% endhighlight %}
+        <br>
+        <div class="lead"><i class="icon-info-sign"></i> Looking for more? Check out the <a href="{{ site.baseurl }}examples/">examples</a>.</div>
+      </div>
+      <div class="span3">
+        <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>
+      </div>
+    </div>
   </section>
 </div>

build/assets/css/font-awesome.css

@@ -178,6 +178,15 @@ ul.icons li [class*=" icon-"] {
   -moz-border-radius: 6px;
   border-radius: 6px;
 }
+.icon-5x {
+  font-size: 5em;
+}
+.icon-5x.icon-border {
+  border-width: 5px;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+}
 .pull-right {
   float: right;
 }
@@ -1134,3 +1143,6 @@ ul.icons li [class*=" icon-"] {
 .icon-rocket:before {
   content: "\f135";
 }
+.icon-maxcdn:before {
+  content: "\f136";
+}

build/assets/css/site.css

@@ -5266,14 +5266,14 @@ body {
   min-width: 990px;
 }
 .wrapper {
-  margin: 0 auto -191px;
+  margin: 0 auto -211px;
 }
 .push {
-  height: 191px;
+  height: 211px;
 }
 .footer {
   margin-top: 40px;
-  height: 90px;
+  height: 110px;
   padding: 30px 0 30px;
 }
 .navbar .brand {
@@ -5285,6 +5285,9 @@ body {
 .navbar .nav > li > a {
   padding: 12px 10px 9px;
 }
+.navbar .nav.pull-right {
+  margin-right: -10px;
+}
 h1,
 h2,
 h3,
@@ -5368,6 +5371,9 @@ h6 {
   color: #ce938e;
   text-shadow: none;
 }
+.jumbotron .carbonad {
+  text-shadow: none;
+}
 .jumbotron-ad {
   padding: 20px 0;
 }
@@ -5377,6 +5383,65 @@ h6 {
 .jumbotron-ad p {
   margin-bottom: 35px;
 }
+.jumbotron-icon {
+  padding: 20px 0 30px;
+  background-color: #eeeeee;
+  color: #222222;
+  text-shadow: 1px 1px 1px #ffffff;
+  border-bottom: solid 1px #c4c4c4;
+}
+.jumbotron-icon h1 {
+  color: #222222;
+  font-size: 40px;
+}
+.jumbotron-icon h1 small {
+  letter-spacing: normal;
+  font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  margin-left: 20px;
+}
+.jumbotron-icon .info-details {
+  float: left;
+}
+.jumbotron-icon .info-details p {
+  margin: 25px 0;
+  font-weight: bold;
+}
+.jumbotron-icon .info-details .dl-horizontal dt {
+  width: 80px;
+}
+.jumbotron-icon .info-details .dl-horizontal dd {
+  margin-left: 95px;
+}
+.jumbotron-icon .icon-2 {
+  font-size: 2em;
+}
+.jumbotron-icon .icon-3 {
+  font-size: 4em;
+}
+.jumbotron-icon .icon-4 {
+  font-size: 7em;
+}
+.jumbotron-icon .icon-5 {
+  font-size: 12em;
+}
+.jumbotron-icon .icon-6 {
+  font-size: 20em;
+}
+.jumbotron-icon .icon-1,
+.jumbotron-icon .icon-2,
+.jumbotron-icon .icon-3,
+.jumbotron-icon .icon-4,
+.jumbotron-icon .icon-5,
+.jumbotron-icon .icon-6 {
+  margin-right: 0.07142857142857142em;
+}
+.info-ad {
+  float: right;
+  width: 154px;
+  height: 219px;
+  margin-left: 15px;
+}
 .btn-github {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

build/assets/js/index/index.js

@@ -5,6 +5,7 @@ $(function() {
   });
 
   // make code pretty
+  $('pre').addClass('prettyprint');
   window.prettyPrint && prettyPrint();
 
   // inject twitter & github counts

build/assets/less/font-awesome.less

@@ -181,6 +181,15 @@ ul.icons {
   }
 }
 
+.icon-5x {
+  font-size: 5em;
+  &.icon-border {
+    border-width: 5px;
+    .border-radius(7px);
+  }
+}
+
+
 // Floats
 // -------------------------
 
@@ -572,3 +581,4 @@ ul.icons {
 .icon-calendar-empty:before       { content: "\f133"; }
 .icon-fire-extinguisher:before    { content: "\f134"; }
 .icon-rocket:before               { content: "\f135"; }
+.icon-maxcdn:before               { content: "\f136"; }

build/assets/less/site.less

@@ -13,6 +13,8 @@
 
 .navbar .nav > li > a { padding: 12px 10px 9px; }
 
+.navbar .nav.pull-right { margin-right: -10px; }
+
 h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
 
 #iconCarousel {
@@ -113,6 +115,7 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
     color: mix(@white, @red, 50%);
     text-shadow: none;
   }
+  .carbonad { text-shadow: none; }
 }
 
 .jumbotron-ad {
@@ -121,6 +124,59 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
   p { margin-bottom: 35px; }
 }
 
+.jumbotron-icon {
+  padding: 20px 0 30px;
+  background-color: @grayLighter;
+  color: @grayDarker;
+  text-shadow: 1px 1px 1px @white;
+  border-bottom: solid 1px mix(@grayLight, @grayLighter, 50%);
+
+  h1 {
+    color: @grayDarker;
+    font-size: 40px;
+//    margin: 25px 0 20px;
+    small {
+      letter-spacing: normal;
+      font-family: @sansFontFamily;
+      font-size: @baseFontSize;
+      margin-left: 20px;
+    }
+  }
+
+  .info-icons {
+//    margin-top: 10px;
+//    text-align: center;
+  }
+  .info-class {
+
+  }
+  .info-details {
+    float: left;
+    p {
+      margin: 25px 0;
+      font-weight: bold;
+    }
+    .dl-horizontal {
+      dt { width: @horizontalComponentOffset - 100; }
+      dd { margin-left: @horizontalComponentOffset - 85; }
+    }
+  }
+  .icon-2 { font-size: 2em; }
+  .icon-3 { font-size: 4em; }
+  .icon-4 { font-size: 7em; }
+  .icon-5 { font-size: 12em; }
+  .icon-6 { font-size: 20em; }
+
+  .icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 1/14em; }
+}
+
+.info-ad {
+  float: right;
+  width: 154px;
+  height: 219px;
+  margin-left: 15px;
+}
+
 .btn-github {
   .buttonBackground(@white, mix(@grayLighter, @grayLight, 50%));
 }

build/assets/less/sticky-footer.less

@@ -24,4 +24,4 @@ html, body {
 //  }
 }
 
-.sticky-footer(90px, 30px, 30px, 40px); // sets default values for sticky footer
+.sticky-footer(110px, 30px, 30px, 40px); // sets default values for sticky footer

build/examples/index.html

@@ -4,7 +4,7 @@ title: Font Awesome Examples
 navbar_active: examples
 ---
 {% capture jumbotron_h1 %}<i class="icon-magic icon-large"></i>&nbsp; Examples{% endcapture %}
-{% capture jumbotron_p %}Some great examples of easy ways to use Font Awesome{% endcapture %}
+{% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
 
 {% include jumbotron.html %}
 {% include stripe-social.html %}

build/icons.yml

@@ -1986,3 +1986,10 @@ icons:
     created:    3.1.0
     categories:
       - Web Application Icons 
+
+  - name:       MaxCDN
+    id:         maxcdn
+    unicode:    f136
+    created:    3.1.0
+    categories:
+      - Web Application Icons