library-mirrors/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-11-20 11:14:28 +00:00
Code Issues Actions Packages 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;
left: -2.142857142857143em;
width: 2.142857142857143em;
line-height: inherit;
top: 0.14285714285714285em;
text-align: center;
}
.fa-li.fa-lg {
left: -1.8571428571428572em;
}
.fa.hide {
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.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-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-muted{color:#eeeeee;}
.fa-light{color:#ffffff;}

5
less/core.less
View File

@ -40,8 +40,11 @@
position: absolute;
left: -@icons-li-width;
width: @icons-li-width;
line-height: inherit;
top: (2em / 14);
text-align: center;
&.fa-lg {
left: -@icons-li-width + (4em / 14);
}
}
// 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" 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" 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" 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"></i>&nbsp; normal</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 btn-default" 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-270"></i>&nbsp; fa-rotate-270</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 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;
left: -@icons-li-width;
width: @icons-li-width;
line-height: inherit;
top: (2em / 14);
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

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

@ -15,3 +15,4 @@
@import "site/feature-list";
@import "site/example-rating";
@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>
<div class="row">
<div class="span3">
<div class="col-md-3">
<div class="well">
<i class="fa fa-building"></i> Building
</div>
</div>
<div class="span3">
<div class="col-md-3">
<div class="well">
<i class="fa fa-building fa-lg"></i> Building Large
</div>
</div>
<div class="span3">
<div class="col-md-3">
<i class="fa fa-building"></i> Building
</div>
<div class="span3">
<div class="col-md-3">
<i class="fa fa-building fa-lg"></i> Building Large
</div>
</div>
<div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="span4">
<div class="col-md-4">
<div class="well">
<i class="fa fa-building"></i> Building
</div>
</div>
<div class="span4">
<div class="col-md-4">
<div class="well">
<i class="fa fa-building fa-lg"></i> Building Large
</div>
</div>
<div class="span4">
<div class="col-md-4">
<i class="fa fa-building fa-lg"></i> Building Large
</div>
</div>
<div class="row">
<div class="span3">
<div class="col-md-3">
<div class="well">
<i class="fa fa-circle"></i> Circle
</div>
</div>
<div class="span3">
<div class="col-md-3">
<div class="well">
<i class="fa fa-circle fa-lg"></i> Circle Large
</div>
</div>
<div class="span3">
<div class="col-md-3">
<i class="fa fa-circle"></i> Circle
</div>
<div class="span3">
<div class="col-md-3">
<i class="fa fa-circle fa-lg"></i> Circle Large
</div>
</div>
<div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="span4">
<div class="col-md-4">
<div class="well">
<i class="fa fa-circle"></i> Circle
</div>
</div>
<div class="span4">
<div class="col-md-4">
<div class="well">
<i class="fa fa-circle fa-lg"></i> Circle Large
</div>
</div>
<div class="span4">
<div class="col-md-4">
<i class="fa fa-circle fa-lg"></i> Circle Large
</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="span2">
<a href="#"><i class="fa fa-building"></i> Link Here</a>
<div class="col-md-2">
<a href="#"><i class="fa fa-building padding-right"></i>Link Here</a>
</div>
<div class="span2">
<a href="#"><i class="fa fa-building fa-lg"></i> Link Here</a>
<div class="col-md-2">
<a href="#"><i class="fa fa-building fa-lg padding-right"></i>Link Here</a>
</div>
<div class="span2">
<a href="#"><i class="fa fa-caret-down"></i> Link Here</a>
<div class="col-md-2">
<a href="#"><i class="fa fa-caret-down padding-right"></i>Link Here</a>
</div>
<div class="span2">
<a href="#">Link Here <i class="fa fa-double-angle-right"></i></a>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right padding-left"></i></a>
</div>
<div class="span2">
<a href="#">Link Here <i class="fa fa-double-angle-right fa-lg"></i></a>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left"></i></a>
</div>
<div class="span2">
<a href="#">Link Here <i class="fa fa-caret-down"></i></a>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-caret-down padding-left"></i></a>
</div>
</div>
<div class="row">
<div class="span2">
<a href="#"><i class="fa fa-building"></i> Link Here</a>
<div class="col-md-2">
<a href="#"><i class="fa fa-building padding-right-sm"></i>Link Here</a>
</div>
<div class="span2">
<a href="#"><i class="fa fa-building fa-lg"></i> Link Here</a>
<div class="col-md-2">
<a href="#"><i class="fa fa-building fa-lg padding-right-sm"></i>Link Here</a>
</div>
<div class="span2">
<a href="#"><i class="fa fa-caret-down"></i> Link Here</a>
<div class="col-md-2">
<a href="#"><i class="fa fa-caret-down padding-right-sm"></i>Link Here</a>
</div>
<div class="span2">
<a href="#">Link Here <i class="fa fa-double-angle-right"></i></a>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right padding-left-sm"></i></a>
</div>
<div class="span2">
<a href="#">Link Here <i class="fa fa-double-angle-right fa-lg"></i></a>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left-sm"></i></a>
</div>
<div class="span2">
<a href="#">Link Here <i class="fa fa-caret-down"></i></a>
<div class="col-md-2">
<a href="#">Link Here<i class="fa fa-caret-down padding-left-sm"></i></a>
</div>
</div>
<h3>Navbar <small>should stay same height </small></h3>
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a>
<ul class="nav">
<li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
<li class="dropdown" style="border: solid 1px white;">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2
<i class="fa fa-caret-down"></i>
</a>
<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 fa-lg"></i> Menu Item 2</a></li>
</ul>
</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-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>
</ul>
</div>
<div class="container">
<a class="navbar-brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a>
<ul class="nav navbar-nav">
<li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
<li class="dropdown" style="border: solid 1px white;">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2
<i class="fa fa-caret-down"></i>
</a>
<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 fa-lg"></i> Menu Item 2</a></li>
</ul>
</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-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>
</ul>
</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>
<h4>Buttons</h4>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><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">Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-building"></i></button>
</div>
<div>
<button class="btn btn-small">Button</button>
<button class="btn btn-small"><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">Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-building"></i></button>
</div>
<div>
<button class="btn">Button</button>
<button class="btn"><i class="fa fa-building"></i> Button</button>
<button class="btn"><i class="fa fa-building"></i></button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-default"><i class="fa fa-building"></i></button>
</div>
<div>
<button class="btn btn-large">Button</button>
<button class="btn btn-large"><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">Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-building"></i></button>
</div>
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><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">Button</button>
<button class="btn btn-default btn-xs"><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>
</div>
<div>
<button class="btn btn-small">Button</button>
<button class="btn btn-small"><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">Button</button>
<button class="btn btn-default btn-sm"><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>
</div>
<div>
<button class="btn">Button</button>
<button class="btn"><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">Button</button>
<button class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</button>
<button class="btn btn-default"><i class="fa fa-building fa-lg"></i></button>
</div>
<div>
<button class="btn btn-large">Button</button>
<button class="btn btn-large"><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">Button</button>
<button class="btn btn-default btn-lg"><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>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><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">Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-circle"></i></button>
</div>
<div>
<button class="btn btn-small">Button</button>
<button class="btn btn-small"><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">Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-circle"></i></button>
</div>
<div>
<button class="btn">Button</button>
<button class="btn"><i class="fa fa-circle"></i> Button</button>
<button class="btn"><i class="fa fa-circle"></i></button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-default"><i class="fa fa-circle"></i></button>
</div>
<div>
<button class="btn btn-large">Button</button>
<button class="btn btn-large"><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">Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-circle"></i></button>
</div>
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><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">Button</button>
<button class="btn btn-default btn-xs"><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>
</div>
<div>
<button class="btn btn-small">Button</button>
<button class="btn btn-small"><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">Button</button>
<button class="btn btn-default btn-sm"><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>
</div>
<div>
<button class="btn">Button</button>
<button class="btn"><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">Button</button>
<button class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</button>
<button class="btn btn-default"><i class="fa fa-circle fa-lg"></i></button>
</div>
<div>
<button class="btn btn-large">Button</button>
<button class="btn btn-large"><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">Button</button>
<button class="btn btn-default btn-lg"><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>
</div>
</div>
</div>
@ -252,101 +250,101 @@ relative_path: ../
<h4>Anchors</h4>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><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">Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-building"></i></a>
</div>
<div>
<a class="btn btn-small">Button</a>
<a class="btn btn-small"><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">Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-building"></i></a>
</div>
<div>
<a class="btn">Button</a>
<a class="btn"><i class="fa fa-building"></i> Button</a>
<a class="btn"><i class="fa fa-building"></i></a>
<a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-default"><i class="fa fa-building"></i></a>
</div>
<div>
<a class="btn btn-large">Button</a>
<a class="btn btn-large"><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">Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-building"></i></a>
</div>
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><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">Button</a>
<a class="btn btn-default btn-xs"><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></a>
</div>
<div>
<a class="btn btn-small">Button</a>
<a class="btn btn-small"><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">Button</a>
<a class="btn btn-default btn-sm"><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></a>
</div>
<div>
<a class="btn">Button</a>
<a class="btn"><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">Button</a>
<a class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</a>
<a class="btn btn-default"><i class="fa fa-building fa-lg"></i></a>
</div>
<div>
<a class="btn btn-large">Button</a>
<a class="btn btn-large"><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">Button</a>
<a class="btn btn-default btn-lg"><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></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><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">Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-circle"></i></a>
</div>
<div>
<a class="btn btn-small">Button</a>
<a class="btn btn-small"><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">Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-circle"></i></a>
</div>
<div>
<a class="btn">Button</a>
<a class="btn"><i class="fa fa-circle"></i> Button</a>
<a class="btn"><i class="fa fa-circle"></i></a>
<a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-default"><i class="fa fa-circle"></i></a>
</div>
<div>
<a class="btn btn-large">Button</a>
<a class="btn btn-large"><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">Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-circle"></i></a>
</div>
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><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">Button</a>
<a class="btn btn-default btn-xs"><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></a>
</div>
<div>
<a class="btn btn-small">Button</a>
<a class="btn btn-small"><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">Button</a>
<a class="btn btn-default btn-sm"><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></a>
</div>
<div>
<a class="btn">Button</a>
<a class="btn"><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">Button</a>
<a class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</a>
<a class="btn btn-default"><i class="fa fa-circle fa-lg"></i></a>
</div>
<div>
<a class="btn btn-large">Button</a>
<a class="btn btn-large"><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">Button</a>
<a class="btn btn-default btn-lg"><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></a>
</div>
</div>
</div>
@ -354,37 +352,37 @@ relative_path: ../
<h3>Button groups <small>should be same height</small></h3>
<div class="row">
<div class="span4">
<div class="col-md-4">
<div style="border: solid 1px #d3d3d3;">
<div class="btn-group">
<button class="btn btn-large">
<button class="btn btn-default btn-lg">
<i class="fa fa-adjust"></i>
</button>
<button class="btn btn-large">
<button class="btn btn-default btn-lg">
Text
</button>
</div>
</div>
</div>
<div class="span4">
<div class="col-md-4">
<div style="border: solid 1px #d3d3d3;">
<div class="btn-group">
<button class="btn">
<button class="btn btn-default">
<i class="fa fa-adjust"></i>
</button>
<button class="btn">
<button class="btn btn-default">
Text
</button>
</div>
</div>
</div>
<div class="span4">
<div class="col-md-4">
<div style="border: solid 1px #d3d3d3;">
<div class="btn-group">
<button class="btn btn-small">
<button class="btn btn-default btn-sm">
<i class="fa fa-adjust"></i>
</button>
<button class="btn btn-small">
<button class="btn btn-default btn-sm">
Text
</button>
</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>
<div class="row">
<div class="span4">
<div class="col-md-4">
<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>
Longer<br>Button</a>
<a class="btn btn-large" href="#">
<a class="btn btn-default btn-lg" href="#">
Longer<br>Button</a>
</div>
</div>
<div class="span4">
<div class="col-md-4">
<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>
Longer<br>Button</a>
<a class="btn" href="#">
<a class="btn btn-default" href="#">
Longer<br>Button</a>
</div>
</div>
<div class="span4">
<div class="col-md-4">
<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>
Longer<br>Button</a>
<a class="btn btn-small" href="#">
<a class="btn btn-default btn-sm" href="#">
Longer<br>Button</a>
</div>
</div>
@ -426,7 +424,7 @@ relative_path: ../
<h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3>
<div class="row">
<div class="span9">
<div class="col-md-9">
<ul class="nav nav-pills" style="border: solid 1px #d3d3d3;">
<li class="active"><a href="#">Nav Item 1</a></li>
<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>
</ul>
</div>
<div class="span3">
<div class="col-md-3">
<ul class="nav nav-list">
<li>
<a href="#c1">
@ -501,12 +499,12 @@ relative_path: ../
<h3>Hide class directly on icons</h3>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div class="well">
<i class="hide fa fa-circle"></i> Icon should be hidden
</div>
</div>
<div class="span6">
<div class="col-md-6">
<i class="hide fa fa-circle"></i> Icon should be hidden
</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>
<div class="row">
<div class="span6">
<div class="col-md-6">
<p class="lead">
<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.
</p>
</div>
<div class="span6">
<div class="col-md-6">
<p class="lead">
<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.
@ -528,15 +526,15 @@ relative_path: ../
</div>
</div>
<div class="row">
<div class="span4">
<div class="col-md-4">
<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.
</div>
<div class="span4">
<div class="col-md-4">
<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.
</div>
<div class="span4">
<div class="col-md-4">
<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.
</div>
@ -545,20 +543,20 @@ relative_path: ../
<h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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-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.
<i class="fa fa-building"></i>
<span class="label">foo</span>
<a class="btn btn-mini">foo</a>
<span class="label label-default">foo</span>
<a class="btn btn-default btn-xs">foo</a>
</li>
</ul>
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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>
@ -569,7 +567,7 @@ relative_path: ../
</div>
</div>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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>
@ -578,7 +576,7 @@ relative_path: ../
</ul>
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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>
@ -589,7 +587,7 @@ relative_path: ../
</div>
</div>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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>
@ -598,7 +596,7 @@ relative_path: ../
</ul>
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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>
@ -609,28 +607,28 @@ relative_path: ../
</div>
</div>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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-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.
<i class="fa fa-building"></i>
<span class="label">foo</span>
<a class="btn btn-mini">foo</a>
<span class="label label-default">foo</span>
<a class="btn btn-default btn-xs">foo</a>
</li>
</ul>
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<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-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.
<i class="fa fa-building"></i>
<span class="label">foo</span>
<a class="btn btn-mini">foo</a>
<span class="label label-default">foo</span>
<a class="btn btn-default btn-xs">foo</a>
</li>
</ul>
</div>
@ -639,7 +637,7 @@ relative_path: ../
<div class="row">
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@ -648,7 +646,7 @@ relative_path: ../
</ul>
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div style="border: solid 1px #d3d3d3;">
<ul>
<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>
<div style="border: solid 1px #d3d3d3;">
<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-small">Loading...</button>
<button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
<button class="btn btn-default btn-sm">Loading...</button>
<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>
</div>
<div style="border: solid 1px #d3d3d3;">
<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">Loading...</button>
<button class="btn btn-default"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
<button class="btn btn-default">Loading...</button>
<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 style="border: solid 1px #d3d3d3;">
<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-large">Loading...</button>
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
<button class="btn btn-default btn-lg">Loading...</button>
<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>
<h4>fa-lg</h4>
<div style="border: solid 1px #d3d3d3;">
<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-small">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-default btn-sm">Loading...</button>
<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 style="border: solid 1px #d3d3d3;">
<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">Loading...</button>
<button class="btn btn-default"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
<button class="btn btn-default">Loading...</button>
<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 style="border: solid 1px #d3d3d3;">
<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-large">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-default btn-lg">Loading...</button>
<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>
<h4>Bootstrap Prepend and Append</h4>
<div class="row">
<div class="span6">
<div class="input-prepend">
<span class="add-on"><i class="fa fa-spinner fa-spin"></i></span>
<input class="span2" id="prependedInput" type="text" placeholder="Username">
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="span6">
<div class="input-append">
<input class="span2" id="appendedInput" type="text">
<span class="add-on"><i class="fa fa-spinner fa-spin"></i></span>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span>
</div>
</div>
</div>
@ -736,12 +734,12 @@ relative_path: ../
<h3>Mirrored and rotated icons</h3>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div class="well">
{% include tests/rotated-flipped.html %}
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div class="well lead">
{% include tests/rotated-flipped.html %}
</div>
@ -749,12 +747,12 @@ relative_path: ../
</div>
<h4>Mirrored and rotated icons inside anchors and buttons</h4>
<div class="row">
<div class="span6">
<div class="col-md-6">
<div class="well">
{% include tests/rotated-flipped-inside-anchor.html %}
</div>
</div>
<div class="span6">
<div class="col-md-6">
<div class="well">
{% include tests/rotated-flipped-inside-btn.html %}
</div>