fixing #721

build/_includes/icons/new.html

@@ -20,6 +20,8 @@
   <div class="row">
     <div class="span3">
       <ul class="the-icons">
+        <li><a href="{{ site.baseurl }}icon/expand-alt"><i class="icon-expand-alt"></i> icon-expand-alt</a></li>
+        <li><a href="{{ site.baseurl }}icon/collapse-alt"><i class="icon-collapse-alt"></i> icon-collapse-alt</a></li>
         <li><a href="{{ site.baseurl }}icon/smile"><i class="icon-smile"></i> icon-smile</a></li>
         <li><a href="{{ site.baseurl }}icon/frown"><i class="icon-frown"></i> icon-frown</a></li>
         <li><a href="{{ site.baseurl }}icon/meh"><i class="icon-meh"></i> icon-meh</a></li>

build/_layouts/base.html

@@ -58,7 +58,7 @@
 <script src="{{ site.baseurl }}assets/js/underscore.min.js"></script>
 <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-222.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>
 
 </body>

build/assets/css/font-awesome.css

@@ -122,7 +122,7 @@ li [class^="icon-"],
 li [class*=" icon-"],
 .nav li [class*=" icon-"] {
   display: inline-block;
-  width: 1.25em;
+  width: 1.2857142857142858em;
   text-align: center;
 }
 li [class^="icon-"].icon-large,
@@ -131,15 +131,16 @@ li [class*=" icon-"].icon-large,
 .nav li [class*=" icon-"].icon-large {
   /* increased font size for icon-large */
 
-  width: 1.5625em;
+  width: 1.5714285714285714em;
 }
-ul.icons {
+ul.icons-ul {
   list-style-type: none;
-  text-indent: -0.75em;
+  text-indent: -0.7142857142857143em;
+  margin-left: 2em;
 }
-ul.icons li [class^="icon-"],
-ul.icons li [class*=" icon-"] {
-  width: .75em;
+ul.icons-ul > li [class^="icon-"],
+ul.icons-ul > li .icon-li {
+  width: 0.7142857142857143em;
 }
 .icon-muted {
   color: #eeeeee;

build/assets/css/site.css

@@ -5478,27 +5478,27 @@ h6 {
   font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 #iconCarousel {
-  font-size: 215px;
+  font-size: 220px;
   text-align: center;
-  line-height: 220px;
+  line-height: 225px;
   text-shadow: 2px 2px 3px #222222;
 }
 #iconCarousel a {
   color: #ffffff;
 }
 #iconCarousel .carousel-control {
-  top: 248px;
+  top: 253px;
   width: 30px;
   height: 30px;
   background: none;
   border-width: 0;
   font-size: 30px;
   line-height: 25px;
-  left: 115px;
+  left: 117px;
 }
 #iconCarousel .carousel-control.right {
   left: auto;
-  right: 115px;
+  right: 117px;
 }
 .jumbotron {
   background: #9d261d;

build/assets/js/index/index.js

@@ -8,21 +8,21 @@ $(function() {
   $('pre').addClass('prettyprint');
   window.prettyPrint && prettyPrint();
 
-  // inject twitter & github counts
-  $.ajax({
-    url: 'http://api.twitter.com/1/users/show.json',
-    data: {screen_name: 'fortaweso_me'},
-    dataType: 'jsonp',
-    success: function(data) {
-      $('#followers').html(data.followers_count);
-    }
-  });
-  $.ajax({
-    url: 'https://api.github.com/repos/fortawesome/Font-Awesome',
-    dataType: 'jsonp',
-    success: function(data) {
-      $('#watchers').html(data.data.watchers);
-      $('#forks').html(data.data.forks);
-    }
-  });
+//  // inject twitter & github counts
+//  $.ajax({
+//    url: 'http://api.twitter.com/1/users/show.json',
+//    data: {screen_name: 'fortaweso_me'},
+//    dataType: 'jsonp',
+//    success: function(data) {
+//      $('#followers').html(data.followers_count);
+//    }
+//  });
+//  $.ajax({
+//    url: 'https://api.github.com/repos/fortawesome/Font-Awesome',
+//    dataType: 'jsonp',
+//    success: function(data) {
+//      $('#watchers').html(data.data.watchers);
+//      $('#forks').html(data.data.forks);
+//    }
+//  });
 });

build/assets/less/font-awesome.less

@@ -122,23 +122,25 @@ li, .nav li {
   [class^="icon-"],
   [class*=" icon-"] {
     display: inline-block;
-    width: 1.25em;
+    width: 18/14em;
     text-align: center;
     &.icon-large {
       /* increased font size for icon-large */
-      width: 1.25*1.25em;
+      width: 22/14em;
     }
   }
 }
 
-ul.icons {
+
+ul.icons-ul {
   list-style-type: none;
-  text-indent: -.75em;
+  text-indent: -10/14em;
+  margin-left: 28/14em;
 
-  li {
+  > li {
     [class^="icon-"],
-    [class*=" icon-"] {
-      width: .75em;
+    .icon-li {
+      width: 10/14em;
     }
   }
 }

build/assets/less/site.less

@@ -18,7 +18,7 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
 
 #iconCarousel {
   a { color: @white; }
-  @size: 215px;
+  @size: 220px;
   font-size: @size;
   text-align: center;
   line-height: @size + 5;
@@ -30,10 +30,10 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
     border-width: 0;
     font-size: 30px;
     line-height: 25px;
-    left: @size - 100px;
+    left: 300/2 - 33px;
     &.right {
       left: auto;
-      right: @size - 100px;
+      right: 300/2 - 33px;
     }
   }
 }

build/test.html

@@ -1,49 +1,10 @@
-<!DOCTYPE html>
-<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
-<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
-<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
-<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
-<head>
-  <!-- Basic Page Needs
- ================================================== -->
-  <meta charset="utf-8" />
-  <title>Font Awesome Tests</title>
-  <meta name="description" content="">
-  <meta name="author" content="">
-  <!--<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">-->
+---
+layout: base
+title: Font Awesome Visual Test Cases
+---
 
-  <!--[if lt IE 9]>
-  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-  <![endif]-->
-
-  <!-- CSS
- ================================================== -->
-
-  <link rel="stylesheet" href="assets/css/site.css">
-  <link rel="stylesheet" href="assets/css/prettify.css">
-  <link rel="stylesheet" href="assets/css/font-awesome.css">
-  <!--[if IE 7]>
-  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
-  <![endif]-->
-  <!-- Le fav and touch icons -->
-  <link rel="shortcut icon" href="assets/ico/favicon.ico">
-
-  <script type="text/javascript">
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-30136587-1']);
-    _gaq.push(['_trackPageview']);
-
-    (function() {
-      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-  </script>
-</head>
-<body>
-
-<div class="container">
-  <h1>Visual tests</h1>
+<section class="container">
+  <h1 class="page-header">Visual Test Cases</h1>
 
   <h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
   <div class="row">
@@ -514,18 +475,63 @@
   <h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
   <div class="row">
     <div class="span6">
-      <ul class="icons">
-        <li><i class="icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-        <li><i class="icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
-        <li><i class="icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-      </ul>
+      <div style="border: solid 1px #d3d3d3;">
+<ul class="icons-ul">
+  <li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+  <li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
+  <li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+</ul>
+      </div>
     </div>
     <div class="span6">
-      <ul class="icons">
-        <li><i class="icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-        <li><i class="icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
-        <li><i class="icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-      </ul>
+      <div style="border: solid 1px #d3d3d3;">
+        <ul class="icons-ul">
+          <li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="icon-li icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
+          <li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span6">
+      <div style="border: solid 1px #d3d3d3;">
+        <ul class="icons-ul lead">
+          <li><i class="icon-li icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="icon-li icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
+          <li><i class="icon-li icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        </ul>
+      </div>
+    </div>
+    <div class="span6">
+      <div style="border: solid 1px #d3d3d3;">
+        <ul class="icons-ul lead">
+          <li><i class="icon-li icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="icon-li icon-arrow-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
+          <li><i class="icon-li icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="span6">
+      <div style="border: solid 1px #d3d3d3;">
+        <ul>
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        </ul>
+      </div>
+    </div>
+    <div class="span6">
+      <div style="border: solid 1px #d3d3d3;">
+        <ul>
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        </ul>
+      </div>
     </div>
   </div>
 
@@ -575,10 +581,4 @@
     <button class="btn btn-large"><i class="icon-circle-blank icon-large icon-spin"></i> Loading...</button>
   </div>
 
-</div>
-
-<script src="assets/js/jquery-1.7.1.min.js"></script>
-<script src="assets/js/bootstrap-222.min.js"></script>
-
-</body>
-</html>
+</section>