deblan-mirror/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome synced 2024-06-17 13:05:26 +02:00
Code Issues Projects Releases Wiki Activity

getting tests updated, tweaking list items again

Browse source
This commit is contained in:
davegandy 2013-10-05 17:16:44 -04:00
parent d546813d67
commit a5214c8248
8 changed files with 342 additions and 247 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
css/font-awesome.css vendored
View file

@ -70,9 +70,12 @@
position: absolute; position: absolute;
left: -2.142857142857143em; left: -2.142857142857143em;
width: 2.142857142857143em; width: 2.142857142857143em;
line-height: inherit; top: 0.14285714285714285em;
text-align: center; text-align: center;
} }
.fa-li.fa-lg {
left: -1.8571428571428572em;
}
.fa.hide { .fa.hide {
display: none; display: none;
} }

2
css/font-awesome.min.css vendored
View file

@ -2,7 +2,7 @@
.fa-lg{font-size:1.3333333333333333em;vertical-align:-10%;line-height:0.75em;} .fa-lg{font-size:1.3333333333333333em;vertical-align:-10%;line-height:0.75em;}
.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-lg{width:1.4285714285714286em;} .fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-lg{width:1.4285714285714286em;}
.fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;} .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;}
.fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;} .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:0.14285714285714285em;text-align:center;}.fa-li.fa-lg{left:-1.8571428571428572em;}
.fa.hide{display:none;} .fa.hide{display:none;}
.fa-muted{color:#eeeeee;} .fa-muted{color:#eeeeee;}
.fa-light{color:#ffffff;} .fa-light{color:#ffffff;}

5
less/core.less
View file

@ -40,8 +40,11 @@
position: absolute; position: absolute;
left: -@icons-li-width; left: -@icons-li-width;
width: @icons-li-width; width: @icons-li-width;
line-height: inherit; top: (2em / 14);
text-align: center; text-align: center;
&.fa-lg {
left: -@icons-li-width + (4em / 14);
}
} }
// allows usage of the hide class directly on font awesome icons // allows usage of the hide class directly on font awesome icons

12
src/_includes/tests/rotated-flipped-inside-btn.html
View file

@ -1,6 +1,6 @@
<a class="btn" href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br>
<a class="btn" href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br>
<a class="btn" href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br>
<a class="btn" href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br>
<a class="btn" href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br>
<a class="btn" href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a>

6
src/assets/font-awesome/less/core.less vendored
View file

@ -42,8 +42,12 @@
position: absolute; position: absolute;
left: -@icons-li-width; left: -@icons-li-width;
width: @icons-li-width; width: @icons-li-width;
line-height: inherit; top: (2em / 14);
text-align: center; text-align: center;
&.{{ site.fontawesome.css_prefix }}-lg {
top: (1em / 14);
left: -@icons-li-width + (4em / 14);
}
} }
// allows usage of the hide class directly on font awesome icons // allows usage of the hide class directly on font awesome icons

1
src/assets/less/site-3.0.0.less
View file

@ -15,3 +15,4 @@
@import "site/feature-list"; @import "site/feature-list";
@import "site/example-rating"; @import "site/example-rating";
@import "site/footer"; @import "site/footer";
@import "site/lazy";

86
src/assets/less/site/lazy.less Normal file
View file

@ -0,0 +1,86 @@
@size-none: 0px;
@size-sm: 5px;
@size-md: 10px;
@size-lg: 22px;
.padding-none { padding: @size-none !important; }
.padding { padding: @size-md !important; }
.padding-sm { padding: @size-sm !important; }
.padding-lg { padding: @size-lg !important; }
.padding-top-none { padding-top: @size-none !important; }
.padding-top { padding-top: @size-md !important; }
.padding-top-sm { padding-top: @size-sm !important; }
.padding-top-lg { padding-top: @size-lg !important; }
.padding-right-none { padding-right: @size-none !important; }
.padding-right { padding-right: @size-md !important; }
.padding-right-sm { padding-right: @size-sm !important; }
.padding-right-lg { padding-right: @size-lg !important; }
.padding-bottom-none { padding-bottom: @size-none !important; }
.padding-bottom { padding-bottom: @size-md !important; }
.padding-bottom-sm { padding-bottom: @size-sm !important; }
.padding-bottom-lg { padding-bottom: @size-lg !important; }
.padding-left-none { padding-left: @size-none !important; }
.padding-left { padding-left: @size-md !important; }
.padding-left-sm { padding-left: @size-sm !important; }
.padding-left-lg { padding-left: @size-lg !important; }
.margin-none { margin: @size-none !important; }
.margin { margin: @size-md !important; }
.margin-sm { margin: @size-sm !important; }
.margin-lg { margin: @size-lg !important; }
.margin-top-none { margin-top: @size-none !important; }
.margin-top { margin-top: @size-md !important; }
.margin-top-lg { margin-top: @size-lg !important; }
.margin-top-sm { margin-top: @size-sm !important; }
.margin-right-none { margin-right: @size-none !important; }
.margin-right { margin-right: @size-md !important; }
.margin-right-lg { margin-right: @size-lg !important; }
.margin-right-sm { margin-right: @size-sm !important; }
.margin-bottom-none { margin-bottom: @size-none !important; }
.margin-bottom { margin-bottom: @size-md !important; }
.margin-bottom-lg { margin-bottom: @size-lg !important; }
.margin-bottom-sm { margin-bottom: @size-sm !important; }
.margin-left-none { margin-left: @size-none !important; }
.margin-left { margin-left: @size-md !important; }
.margin-left-lg { margin-left: @size-lg !important; }
.margin-left-sm { margin-left: @size-sm !important; }
.border-left-none { border-left: none !important; }
.border-right-none { border-right: none !important; }
.border-bottom-none { border-bottom: none !important; }
.border-top-none { border-top: none !important; }
.display-block { display: block; } // use to swap an anchor tag to span a whole row to make click target larger
.no-underline:hover { text-decoration: none; }
.clickable { cursor: pointer; }
.strong { font-weight: bold; }
.em { font-style: italic; }
.small { font-size: 85%; } // Ex: 14px base font * 85% = about 12px
.no-link { color: @gray-dark; }
.text-sans-serif { font-family: @font-family-sans-serif; }
.text-ellipsis { .text-overflow(); } // truncates text to a single line with an ellipsis at the end
.text-default {
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
font-weight: normal;
}
.text-hilite {
color: @link-color;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
.text-strike { text-decoration: line-through; }
.text-upper { text-transform: uppercase; }
.text-lower { text-transform: lowercase; }

472
src/test.html
View file

@ -9,139 +9,137 @@ relative_path: ../
<h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3> <h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
<div class="row"> <div class="row">
<div class="span3"> <div class="col-md-3">
<div class="well"> <div class="well">
<i class="fa fa-building"></i> Building <i class="fa fa-building"></i> Building
</div> </div>
</div> </div>
<div class="span3"> <div class="col-md-3">
<div class="well"> <div class="well">
<i class="fa fa-building fa-lg"></i> Building Large <i class="fa fa-building fa-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="span3"> <div class="col-md-3">
<i class="fa fa-building"></i> Building <i class="fa fa-building"></i> Building
</div> </div>
<div class="span3"> <div class="col-md-3">
<i class="fa fa-building fa-lg"></i> Building Large <i class="fa fa-building fa-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="row" style="font-size: 24px; line-height: 1.5em;"> <div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="span4"> <div class="col-md-4">
<div class="well"> <div class="well">
<i class="fa fa-building"></i> Building <i class="fa fa-building"></i> Building
</div> </div>
</div> </div>
<div class="span4"> <div class="col-md-4">
<div class="well"> <div class="well">
<i class="fa fa-building fa-lg"></i> Building Large <i class="fa fa-building fa-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="span4"> <div class="col-md-4">
<i class="fa fa-building fa-lg"></i> Building Large <i class="fa fa-building fa-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="col-md-3">
<div class="well"> <div class="well">
<i class="fa fa-circle"></i> Circle <i class="fa fa-circle"></i> Circle
</div> </div>
</div> </div>
<div class="span3"> <div class="col-md-3">
<div class="well"> <div class="well">
<i class="fa fa-circle fa-lg"></i> Circle Large <i class="fa fa-circle fa-lg"></i> Circle Large
</div> </div>
</div> </div>
<div class="span3"> <div class="col-md-3">
<i class="fa fa-circle"></i> Circle <i class="fa fa-circle"></i> Circle
</div> </div>
<div class="span3"> <div class="col-md-3">
<i class="fa fa-circle fa-lg"></i> Circle Large <i class="fa fa-circle fa-lg"></i> Circle Large
</div> </div>
</div> </div>
<div class="row" style="font-size: 24px; line-height: 1.5em;"> <div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="span4"> <div class="col-md-4">
<div class="well"> <div class="well">
<i class="fa fa-circle"></i> Circle <i class="fa fa-circle"></i> Circle
</div> </div>
</div> </div>
<div class="span4"> <div class="col-md-4">
<div class="well"> <div class="well">
<i class="fa fa-circle fa-lg"></i> Circle Large <i class="fa fa-circle fa-lg"></i> Circle Large
</div> </div>
</div> </div>
<div class="span4"> <div class="col-md-4">
<i class="fa fa-circle fa-lg"></i> Circle Large <i class="fa fa-circle fa-lg"></i> Circle Large
</div> </div>
</div> </div>
<h3>Links with Icons <small>icon should activate link & underline</small></h3> <h3>Links with Icons <small>icon should activate link & NOT underline</small></h3>
<div class="row lead"> <div class="row lead">
<div class="span2"> <div class="col-md-2">
<a href="#"><i class="fa fa-building"></i> Link Here</a> <a href="#"><i class="fa fa-building padding-right"></i>Link Here</a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#"><i class="fa fa-building fa-lg"></i> Link Here</a> <a href="#"><i class="fa fa-building fa-lg padding-right"></i>Link Here</a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#"><i class="fa fa-caret-down"></i> Link Here</a> <a href="#"><i class="fa fa-caret-down padding-right"></i>Link Here</a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#">Link Here <i class="fa fa-double-angle-right"></i></a> <a href="#">Link Here<i class="fa fa-double-angle-right padding-left"></i></a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#">Link Here <i class="fa fa-double-angle-right fa-lg"></i></a> <a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left"></i></a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#">Link Here <i class="fa fa-caret-down"></i></a> <a href="#">Link Here<i class="fa fa-caret-down padding-left"></i></a>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span2"> <div class="col-md-2">
<a href="#"><i class="fa fa-building"></i> Link Here</a> <a href="#"><i class="fa fa-building padding-right-sm"></i>Link Here</a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#"><i class="fa fa-building fa-lg"></i> Link Here</a> <a href="#"><i class="fa fa-building fa-lg padding-right-sm"></i>Link Here</a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#"><i class="fa fa-caret-down"></i> Link Here</a> <a href="#"><i class="fa fa-caret-down padding-right-sm"></i>Link Here</a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#">Link Here <i class="fa fa-double-angle-right"></i></a> <a href="#">Link Here<i class="fa fa-double-angle-right padding-left-sm"></i></a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#">Link Here <i class="fa fa-double-angle-right fa-lg"></i></a> <a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left-sm"></i></a>
</div> </div>
<div class="span2"> <div class="col-md-2">
<a href="#">Link Here <i class="fa fa-caret-down"></i></a> <a href="#">Link Here<i class="fa fa-caret-down padding-left-sm"></i></a>
</div> </div>
</div> </div>
<h3>Navbar <small>should stay same height </small></h3> <h3>Navbar <small>should stay same height </small></h3>
<div class="navbar navbar-inverse navbar-static-top"> <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <a class="navbar-brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a>
<a class="brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a> <ul class="nav navbar-nav">
<ul class="nav"> <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
<li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li> <li class="dropdown" style="border: solid 1px white;">
<li class="dropdown" style="border: solid 1px white;"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> Nav Item 2
Nav Item 2 <i class="fa fa-caret-down"></i>
<i class="fa fa-caret-down"></i> </a>
</a> <ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu" role="menu"> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
<li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> </ul>
</ul> </li>
</li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 3</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 3</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-envelope"></i> Nav Item 4</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-envelope"></i> Nav Item 4</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 5</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 5</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 6</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 6</a></li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
@ -149,101 +147,101 @@ relative_path: ../
<h3>Plain buttons next to buttons w/icons <small>should be same height, icons not clipped</small></h3> <h3>Plain buttons next to buttons w/icons <small>should be same height, icons not clipped</small></h3>
<h4>Buttons</h4> <h4>Buttons</h4>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-mini">Button</button> <button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-mini"><i class="fa fa-building"></i> Button</button> <button class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-mini"><i class="fa fa-building"></i></button> <button class="btn btn-default btn-xs"><i class="fa fa-building"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-small">Button</button> <button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-small"><i class="fa fa-building"></i> Button</button> <button class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-small"><i class="fa fa-building"></i></button> <button class="btn btn-default btn-sm"><i class="fa fa-building"></i></button>
</div> </div>
<div> <div>
<button class="btn">Button</button> <button class="btn btn-default">Button</button>
<button class="btn"><i class="fa fa-building"></i> Button</button> <button class="btn btn-default"><i class="fa fa-building"></i> Button</button>
<button class="btn"><i class="fa fa-building"></i></button> <button class="btn btn-default"><i class="fa fa-building"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-large">Button</button> <button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-large"><i class="fa fa-building"></i> Button</button> <button class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-large"><i class="fa fa-building"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-building"></i></button>
</div> </div>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-mini">Button</button> <button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-mini"><i class="fa fa-building fa-lg"></i> Button</button> <button class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i> Button</button>
<button class="btn btn-mini"><i class="fa fa-building fa-lg"></i></button> <button class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-small">Button</button> <button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-small"><i class="fa fa-building fa-lg"></i> Button</button> <button class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i> Button</button>
<button class="btn btn-small"><i class="fa fa-building fa-lg"></i></button> <button class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn">Button</button> <button class="btn btn-default">Button</button>
<button class="btn"><i class="fa fa-building fa-lg"></i> Button</button> <button class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</button>
<button class="btn"><i class="fa fa-building fa-lg"></i></button> <button class="btn btn-default"><i class="fa fa-building fa-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-large">Button</button> <button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-large"><i class="fa fa-building fa-lg"></i> Button</button> <button class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i> Button</button>
<button class="btn btn-large"><i class="fa fa-building fa-lg"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-mini">Button</button> <button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-mini"><i class="fa fa-circle"></i> Button</button> <button class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-mini"><i class="fa fa-circle"></i></button> <button class="btn btn-default btn-xs"><i class="fa fa-circle"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-small">Button</button> <button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-small"><i class="fa fa-circle"></i> Button</button> <button class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-small"><i class="fa fa-circle"></i></button> <button class="btn btn-default btn-sm"><i class="fa fa-circle"></i></button>
</div> </div>
<div> <div>
<button class="btn">Button</button> <button class="btn btn-default">Button</button>
<button class="btn"><i class="fa fa-circle"></i> Button</button> <button class="btn btn-default"><i class="fa fa-circle"></i> Button</button>
<button class="btn"><i class="fa fa-circle"></i></button> <button class="btn btn-default"><i class="fa fa-circle"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-large">Button</button> <button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-large"><i class="fa fa-circle"></i> Button</button> <button class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-large"><i class="fa fa-circle"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-circle"></i></button>
</div> </div>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-mini">Button</button> <button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-mini"><i class="fa fa-circle fa-lg"></i> Button</button> <button class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i> Button</button>
<button class="btn btn-mini"><i class="fa fa-circle fa-lg"></i></button> <button class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-small">Button</button> <button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-small"><i class="fa fa-circle fa-lg"></i> Button</button> <button class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i> Button</button>
<button class="btn btn-small"><i class="fa fa-circle fa-lg"></i></button> <button class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn">Button</button> <button class="btn btn-default">Button</button>
<button class="btn"><i class="fa fa-circle fa-lg"></i> Button</button> <button class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</button>
<button class="btn"><i class="fa fa-circle fa-lg"></i></button> <button class="btn btn-default"><i class="fa fa-circle fa-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-large">Button</button> <button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-large"><i class="fa fa-circle fa-lg"></i> Button</button> <button class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i> Button</button>
<button class="btn btn-large"><i class="fa fa-circle fa-lg"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -252,101 +250,101 @@ relative_path: ../
<h4>Anchors</h4> <h4>Anchors</h4>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-mini">Button</a> <a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-mini"><i class="fa fa-building"></i> Button</a> <a class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-mini"><i class="fa fa-building"></i></a> <a class="btn btn-default btn-xs"><i class="fa fa-building"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-small">Button</a> <a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-small"><i class="fa fa-building"></i> Button</a> <a class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-small"><i class="fa fa-building"></i></a> <a class="btn btn-default btn-sm"><i class="fa fa-building"></i></a>
</div> </div>
<div> <div>
<a class="btn">Button</a> <a class="btn btn-default">Button</a>
<a class="btn"><i class="fa fa-building"></i> Button</a> <a class="btn btn-default"><i class="fa fa-building"></i> Button</a>
<a class="btn"><i class="fa fa-building"></i></a> <a class="btn btn-default"><i class="fa fa-building"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-large">Button</a> <a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-large"><i class="fa fa-building"></i> Button</a> <a class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-large"><i class="fa fa-building"></i></a> <a class="btn btn-default btn-lg"><i class="fa fa-building"></i></a>
</div> </div>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-mini">Button</a> <a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-mini"><i class="fa fa-building fa-lg"></i> Button</a> <a class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i> Button</a>
<a class="btn btn-mini"><i class="fa fa-building fa-lg"></i></a> <a class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-small">Button</a> <a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-small"><i class="fa fa-building fa-lg"></i> Button</a> <a class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i> Button</a>
<a class="btn btn-small"><i class="fa fa-building fa-lg"></i></a> <a class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn">Button</a> <a class="btn btn-default">Button</a>
<a class="btn"><i class="fa fa-building fa-lg"></i> Button</a> <a class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</a>
<a class="btn"><i class="fa fa-building fa-lg"></i></a> <a class="btn btn-default"><i class="fa fa-building fa-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-large">Button</a> <a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-large"><i class="fa fa-building fa-lg"></i> Button</a> <a class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i> Button</a>
<a class="btn btn-large"><i class="fa fa-building fa-lg"></i></a> <a class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-mini">Button</a> <a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-mini"><i class="fa fa-circle"></i> Button</a> <a class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-mini"><i class="fa fa-circle"></i></a> <a class="btn btn-default btn-xs"><i class="fa fa-circle"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-small">Button</a> <a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-small"><i class="fa fa-circle"></i> Button</a> <a class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-small"><i class="fa fa-circle"></i></a> <a class="btn btn-default btn-sm"><i class="fa fa-circle"></i></a>
</div> </div>
<div> <div>
<a class="btn">Button</a> <a class="btn btn-default">Button</a>
<a class="btn"><i class="fa fa-circle"></i> Button</a> <a class="btn btn-default"><i class="fa fa-circle"></i> Button</a>
<a class="btn"><i class="fa fa-circle"></i></a> <a class="btn btn-default"><i class="fa fa-circle"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-large">Button</a> <a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-large"><i class="fa fa-circle"></i> Button</a> <a class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-large"><i class="fa fa-circle"></i></a> <a class="btn btn-default btn-lg"><i class="fa fa-circle"></i></a>
</div> </div>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-mini">Button</a> <a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-mini"><i class="fa fa-circle fa-lg"></i> Button</a> <a class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i> Button</a>
<a class="btn btn-mini"><i class="fa fa-circle fa-lg"></i></a> <a class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-small">Button</a> <a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-small"><i class="fa fa-circle fa-lg"></i> Button</a> <a class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i> Button</a>
<a class="btn btn-small"><i class="fa fa-circle fa-lg"></i></a> <a class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn">Button</a> <a class="btn btn-default">Button</a>
<a class="btn"><i class="fa fa-circle fa-lg"></i> Button</a> <a class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</a>
<a class="btn"><i class="fa fa-circle fa-lg"></i></a> <a class="btn btn-default"><i class="fa fa-circle fa-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-large">Button</a> <a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-large"><i class="fa fa-circle fa-lg"></i> Button</a> <a class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i> Button</a>
<a class="btn btn-large"><i class="fa fa-circle fa-lg"></i></a> <a class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -354,37 +352,37 @@ relative_path: ../
<h3>Button groups <small>should be same height</small></h3> <h3>Button groups <small>should be same height</small></h3>
<div class="row"> <div class="row">
<div class="span4"> <div class="col-md-4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-large"> <button class="btn btn-default btn-lg">
<i class="fa fa-adjust"></i> <i class="fa fa-adjust"></i>
</button> </button>
<button class="btn btn-large"> <button class="btn btn-default btn-lg">
Text Text
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="span4"> <div class="col-md-4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<div class="btn-group"> <div class="btn-group">
<button class="btn"> <button class="btn btn-default">
<i class="fa fa-adjust"></i> <i class="fa fa-adjust"></i>
</button> </button>
<button class="btn"> <button class="btn btn-default">
Text Text
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="span4"> <div class="col-md-4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-small"> <button class="btn btn-default btn-sm">
<i class="fa fa-adjust"></i> <i class="fa fa-adjust"></i>
</button> </button>
<button class="btn btn-small"> <button class="btn btn-default btn-sm">
Text Text
</button> </button>
</div> </div>
@ -394,30 +392,30 @@ relative_path: ../
<h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3> <h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3>
<div class="row"> <div class="row">
<div class="span4"> <div class="col-md-4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<a class="btn btn-large" href="#"> <a class="btn btn-default btn-lg" href="#">
<i class="fa fa-github fa-2x pull-left"></i> <i class="fa fa-github fa-2x pull-left"></i>
Longer<br>Button</a> Longer<br>Button</a>
<a class="btn btn-large" href="#"> <a class="btn btn-default btn-lg" href="#">
Longer<br>Button</a> Longer<br>Button</a>
</div> </div>
</div> </div>
<div class="span4"> <div class="col-md-4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<a class="btn" href="#"> <a class="btn btn-default" href="#">
<i class="fa fa-github fa-2x pull-left"></i> <i class="fa fa-github fa-2x pull-left"></i>
Longer<br>Button</a> Longer<br>Button</a>
<a class="btn" href="#"> <a class="btn btn-default" href="#">
Longer<br>Button</a> Longer<br>Button</a>
</div> </div>
</div> </div>
<div class="span4"> <div class="col-md-4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<a class="btn btn-small" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa fa-github fa-2x pull-left"></i> <i class="fa fa-github fa-2x pull-left"></i>
Longer<br>Button</a> Longer<br>Button</a>
<a class="btn btn-small" href="#"> <a class="btn btn-default btn-sm" href="#">
Longer<br>Button</a> Longer<br>Button</a>
</div> </div>
</div> </div>
@ -426,7 +424,7 @@ relative_path: ../
<h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3> <h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3>
<div class="row"> <div class="row">
<div class="span9"> <div class="col-md-9">
<ul class="nav nav-pills" style="border: solid 1px #d3d3d3;"> <ul class="nav nav-pills" style="border: solid 1px #d3d3d3;">
<li class="active"><a href="#">Nav Item 1</a></li> <li class="active"><a href="#">Nav Item 1</a></li>
<li class="dropdown active"> <li class="dropdown active">
@ -482,7 +480,7 @@ relative_path: ../
<li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li> <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="col-md-3">
<ul class="nav nav-list"> <ul class="nav nav-list">
<li> <li>
<a href="#c1"> <a href="#c1">
@ -501,12 +499,12 @@ relative_path: ../
<h3>Hide class directly on icons</h3> <h3>Hide class directly on icons</h3>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div class="well"> <div class="well">
<i class="hide fa fa-circle"></i> Icon should be hidden <i class="hide fa fa-circle"></i> Icon should be hidden
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<i class="hide fa fa-circle"></i> Icon should be hidden <i class="hide fa fa-circle"></i> Icon should be hidden
</div> </div>
</div> </div>
@ -514,13 +512,13 @@ relative_path: ../
<h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3> <h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<p class="lead"> <p class="lead">
<i class="fa fa-stethoscope fa-3x pull-left fa-border"></i> <i class="fa fa-stethoscope fa-3x pull-left fa-border"></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. 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.
</p> </p>
</div> </div>
<div class="span6"> <div class="col-md-6">
<p class="lead"> <p class="lead">
<i class="fa fa-ambulance fa-4x pull-right fa-border"></i> <i class="fa fa-ambulance fa-4x pull-right fa-border"></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. 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.
@ -528,15 +526,15 @@ relative_path: ../
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span4"> <div class="col-md-4">
<i class="fa fa-building fa-2x pull-left fa-border"></i> <i class="fa fa-building fa-2x pull-left fa-border"></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. 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.
</div> </div>
<div class="span4"> <div class="col-md-4">
<i class="fa fa-stethoscope fa-3x pull-right fa-border"></i> <i class="fa fa-stethoscope fa-3x pull-right fa-border"></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. 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.
</div> </div>
<div class="span4"> <div class="col-md-4">
<i class="fa fa-ambulance fa-4x pull-left"></i> <i class="fa fa-ambulance fa-4x pull-left"></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. 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.
</div> </div>
@ -545,20 +543,20 @@ relative_path: ../
<h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3> <h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-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="fa-li fa fa-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="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa fa-building"></i> <i class="fa fa-building"></i>
<span class="label">foo</span> <span class="label label-default">foo</span>
<a class="btn btn-mini">foo</a> <a class="btn btn-default btn-xs">foo</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -569,7 +567,7 @@ relative_path: ../
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul lead"> <ul class="fa-ul lead">
<li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -578,7 +576,7 @@ relative_path: ../
</ul> </ul>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul lead"> <ul class="fa-ul lead">
<li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -589,7 +587,7 @@ relative_path: ../
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-ul">
<li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -598,7 +596,7 @@ relative_path: ../
</ul> </ul>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-ul">
<li><a href="#"><i class="fa-li fa fa-double-angle-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-double-angle-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -609,28 +607,28 @@ relative_path: ../
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-spinner fa-spin"></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="fa-li fa fa-spinner fa-spin"></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="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa fa-building"></i> <i class="fa fa-building"></i>
<span class="label">foo</span> <span class="label label-default">foo</span>
<a class="btn btn-mini">foo</a> <a class="btn btn-default btn-xs">foo</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-refresh fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-refresh fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-spinner fa-spin fa-lg"></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="fa-li fa fa-spinner fa-spin fa-lg"></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="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa fa-building"></i> <i class="fa fa-building"></i>
<span class="label">foo</span> <span class="label label-default">foo</span>
<a class="btn btn-mini">foo</a> <a class="btn btn-default btn-xs">foo</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -639,7 +637,7 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul> <ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -648,7 +646,7 @@ relative_path: ../
</ul> </ul>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul> <ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -663,60 +661,60 @@ relative_path: ../
<h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3> <h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-refresh fa-spin"></i> Loading... <i class="fa fa-refresh fa-spin"></i> Loading...
<button class="btn btn-small"><i class="fa fa-refresh fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
<button class="btn btn-small">Loading...</button> <button class="btn btn-default btn-sm">Loading...</button>
<i class="fa fa-circle-blank fa-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn btn-small"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
<a href="#"><i class="fa fa-refresh fa-spin"></i> Loading...</a> <a href="#"><i class="fa fa-refresh fa-spin"></i> Loading...</a>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-refresh fa-spin"></i> Loading... <i class="fa fa-refresh fa-spin"></i> Loading...
<button class="btn"><i class="fa fa-refresh fa-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
<button class="btn">Loading...</button> <button class="btn btn-default">Loading...</button>
<i class="fa fa-circle-blank fa-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-spinner fa-spin"></i> Loading... <i class="fa fa-spinner fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa fa-spinner fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
<button class="btn btn-large">Loading...</button> <button class="btn btn-default btn-lg">Loading...</button>
<i class="fa fa-circle-blank fa-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
</div> </div>
<h4>fa-lg</h4> <h4>fa-lg</h4>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-refresh fa-lg fa-spin"></i> Loading... <i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
<button class="btn btn-small"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
<button class="btn btn-small">Loading...</button> <button class="btn btn-default btn-sm">Loading...</button>
<i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading... <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
<button class="btn btn-small"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-refresh fa-lg fa-spin"></i> Loading... <i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
<button class="btn"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
<button class="btn">Loading...</button> <button class="btn btn-default">Loading...</button>
<i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading... <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
<button class="btn"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-spinner fa-lg fa-spin"></i> Loading... <i class="fa fa-spinner fa-lg fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa fa-spinner fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-lg fa-spin"></i> Loading...</button>
<button class="btn btn-large">Loading...</button> <button class="btn btn-default btn-lg">Loading...</button>
<i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading... <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
<button class="btn btn-large"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
</div> </div>
<h4>Bootstrap Prepend and Append</h4> <h4>Bootstrap Prepend and Append</h4>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-4">
<div class="input-prepend"> <div class="input-group">
<span class="add-on"><i class="fa fa-spinner fa-spin"></i></span> <span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span>
<input class="span2" id="prependedInput" type="text" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-4">
<div class="input-append"> <div class="input-group">
<input class="span2" id="appendedInput" type="text"> <input type="text" class="form-control">
<span class="add-on"><i class="fa fa-spinner fa-spin"></i></span> <span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span>
</div> </div>
</div> </div>
</div> </div>
@ -736,12 +734,12 @@ relative_path: ../
<h3>Mirrored and rotated icons</h3> <h3>Mirrored and rotated icons</h3>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div class="well"> <div class="well">
{% include tests/rotated-flipped.html %} {% include tests/rotated-flipped.html %}
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div class="well lead"> <div class="well lead">
{% include tests/rotated-flipped.html %} {% include tests/rotated-flipped.html %}
</div> </div>
@ -749,12 +747,12 @@ relative_path: ../
</div> </div>
<h4>Mirrored and rotated icons inside anchors and buttons</h4> <h4>Mirrored and rotated icons inside anchors and buttons</h4>
<div class="row"> <div class="row">
<div class="span6"> <div class="col-md-6">
<div class="well"> <div class="well">
{% include tests/rotated-flipped-inside-anchor.html %} {% include tests/rotated-flipped-inside-anchor.html %}
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div class="well"> <div class="well">
{% include tests/rotated-flipped-inside-btn.html %} {% include tests/rotated-flipped-inside-btn.html %}
</div> </div>