release of 3.0.2

This commit is contained in:
davegandy 2013-01-17 12:29:44 -05:00
parent 968aafa5ba
commit 2661b3d0e0
7 changed files with 239 additions and 36 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
/*!
* Font Awesome 3.0.1
* Font Awesome 3.0.2
* the iconic font designed for use with Twitter Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation

View File

@ -1,5 +1,5 @@
/*!
* Font Awesome 3.0.1
* Font Awesome 3.0.2
* the iconic font designed for use with Twitter Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation

View File

@ -1,5 +1,5 @@
/*!
* Font Awesome 3.0.1
* Font Awesome 3.0.2
* the iconic font designed for use with Twitter Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation
@ -21,21 +21,16 @@
* Work: Lead Product Designer @ http://kyruus.com
*/
[class^="icon-"],
[class*=" icon-"] {
padding-right:.3em;
}
.icon-large {
font-size: 4/3em;
margin-top: -4px;
padding-top: 3px;
margin-bottom: -4px;
padding-bottom: 3px;
vertical-align: -20%;
vertical-align: middle;
}
.btn, .nav {
.nav {
[class^="icon-"],
[class*=" icon-"] {
vertical-align: inherit;
@ -43,7 +38,32 @@
padding-top: 3px;
margin-bottom: -4px;
padding-bottom: 3px;
line-height: .9em;
&.icon-large {
vertical-align: -25%;
}
}
}
.nav-pills, .nav-tabs {
[class^="icon-"],
[class*=" icon-"] {
&.icon-large {
line-height: .75em;
margin-top: -7px;
padding-top: 5px;
margin-bottom: -5px;
padding-bottom: 4px;
}
}
}
.btn {
[class^="icon-"],
[class*=" icon-"] {
&.pull-left, &.pull-right { vertical-align: inherit; }
&.icon-large {
margin-top: -.5em;
}
}
}

View File

@ -1,5 +1,5 @@
/*!
* Font Awesome 3.0.1
* Font Awesome 3.0.2
* the iconic font designed for use with Twitter Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation

View File

@ -98,7 +98,7 @@
View Project<br>on GitHub</a>
</div>
<div class="shameless-self-promotion">
Version 3.0.1 • Created & Maintained by Dave Gandy
Version 3.0.2 • Created & Maintained by Dave Gandy
</div>
</div>
</div>

225
test.html
View File

@ -45,7 +45,7 @@
<div class="container">
<h1>Visual tests</h1>
<h3>Icons <small>Icons should not be clipped</small></h3>
<h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
<div class="row">
<div class="span3">
<div class="well">
@ -79,24 +79,81 @@
<i class="icon-building icon-large"></i> Building Large
</div>
</div>
<div class="row">
<div class="span3">
<div class="well">
<i class="icon-circle"></i> Circle
</div>
</div>
<div class="span3">
<div class="well">
<i class="icon-circle icon-large"></i> Circle Large
</div>
</div>
<div class="span3">
<i class="icon-circle"></i> Circle
</div>
<div class="span3">
<i class="icon-circle icon-large"></i> Circle Large
</div>
</div>
<div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="span4">
<div class="well">
<i class="icon-circle"></i> Circle
</div>
</div>
<div class="span4">
<div class="well">
<i class="icon-circle icon-large"></i> Circle Large
</div>
</div>
<div class="span4">
<i class="icon-circle icon-large"></i> Circle Large
</div>
</div>
<h3>Links with Icons <small>icon should activate link & underline</small></h3>
<div>
<a href="#"><i class="icon-building"></i> Link Here</a>
<a href="#"><i class="icon-building icon-large"></i> Link Here</a>
<a href="#"><i class="icon-caret-down"></i> Link Here</a>
<a href="#">Link Here <i class="icon-double-angle-right"></i></a>
<a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a>
<a href="#">Link Here <i class="icon-caret-down"></i></a>
<div class="row lead">
<div class="span2">
<a href="#"><i class="icon-building"></i> Link Here</a>
</div>
<div class="span2">
<a href="#"><i class="icon-building icon-large"></i> Link Here</a>
</div>
<div class="span2">
<a href="#"><i class="icon-caret-down"></i> Link Here</a>
</div>
<div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right"></i></a>
</div>
<div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a>
</div>
<div class="span2">
<a href="#">Link Here <i class="icon-caret-down"></i></a>
</div>
</div>
<div class="lead">
<a href="#"><i class="icon-building"></i> Link Here</a>
<a href="#"><i class="icon-building icon-large"></i> Link Here</a>
<a href="#"><i class="icon-caret-down"></i> Link Here</a>
<a href="#">Link Here <i class="icon-double-angle-right"></i></a>
<a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a>
<a href="#">Link Here <i class="icon-caret-down"></i></a>
<div class="row">
<div class="span2">
<a href="#"><i class="icon-building"></i> Link Here</a>
</div>
<div class="span2">
<a href="#"><i class="icon-building icon-large"></i> Link Here</a>
</div>
<div class="span2">
<a href="#"><i class="icon-caret-down"></i> Link Here</a>
</div>
<div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right"></i></a>
</div>
<div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a>
</div>
<div class="span2">
<a href="#">Link Here <i class="icon-caret-down"></i></a>
</div>
</div>
@ -118,14 +175,16 @@
</ul>
</li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 3</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-envelope"></i> Nav Item 3</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-envelope"></i> Nav Item 4</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 5</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="icon-circle"></i> Nav Item 6</a></li>
</ul>
</div>
</div>
</div>
<h3>Plain buttons next to icon buttons <small>should be same height</small></h3>
<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">
@ -177,6 +236,56 @@
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><i class="icon-circle"></i> Button</button>
<button class="btn btn-mini"><i class="icon-circle"></i></button>
</div>
<div>
<button class="btn btn-small">Button</button>
<button class="btn btn-small"><i class="icon-circle"></i> Button</button>
<button class="btn btn-small"><i class="icon-circle"></i></button>
</div>
<div>
<button class="btn">Button</button>
<button class="btn"><i class="icon-circle"></i> Button</button>
<button class="btn"><i class="icon-circle"></i></button>
</div>
<div>
<button class="btn btn-large">Button</button>
<button class="btn btn-large"><i class="icon-circle"></i> Button</button>
<button class="btn btn-large"><i class="icon-circle"></i></button>
</div>
</div>
</div>
<div class="span6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<button class="btn btn-mini">Button</button>
<button class="btn btn-mini"><i class="icon-circle icon-large"></i> Button</button>
<button class="btn btn-mini"><i class="icon-circle icon-large"></i></button>
</div>
<div>
<button class="btn btn-small">Button</button>
<button class="btn btn-small"><i class="icon-circle icon-large"></i> Button</button>
<button class="btn btn-small"><i class="icon-circle icon-large"></i></button>
</div>
<div>
<button class="btn">Button</button>
<button class="btn"><i class="icon-circle icon-large"></i> Button</button>
<button class="btn"><i class="icon-circle icon-large"></i></button>
</div>
<div>
<button class="btn btn-large">Button</button>
<button class="btn btn-large"><i class="icon-circle icon-large"></i> Button</button>
<button class="btn btn-large"><i class="icon-circle icon-large"></i></button>
</div>
</div>
</div>
</div>
<h4>Anchors</h4>
@ -230,6 +339,56 @@
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><i class="icon-circle"></i> Button</a>
<a class="btn btn-mini"><i class="icon-circle"></i></a>
</div>
<div>
<a class="btn btn-small">Button</a>
<a class="btn btn-small"><i class="icon-circle"></i> Button</a>
<a class="btn btn-small"><i class="icon-circle"></i></a>
</div>
<div>
<a class="btn">Button</a>
<a class="btn"><i class="icon-circle"></i> Button</a>
<a class="btn"><i class="icon-circle"></i></a>
</div>
<div>
<a class="btn btn-large">Button</a>
<a class="btn btn-large"><i class="icon-circle"></i> Button</a>
<a class="btn btn-large"><i class="icon-circle"></i></a>
</div>
</div>
</div>
<div class="span6">
<div style="border: solid 1px #d3d3d3; text-align: center;">
<div>
<a class="btn btn-mini">Button</a>
<a class="btn btn-mini"><i class="icon-circle icon-large"></i> Button</a>
<a class="btn btn-mini"><i class="icon-circle icon-large"></i></a>
</div>
<div>
<a class="btn btn-small">Button</a>
<a class="btn btn-small"><i class="icon-circle icon-large"></i> Button</a>
<a class="btn btn-small"><i class="icon-circle icon-large"></i></a>
</div>
<div>
<a class="btn">Button</a>
<a class="btn"><i class="icon-circle icon-large"></i> Button</a>
<a class="btn"><i class="icon-circle icon-large"></i></a>
</div>
<div>
<a class="btn btn-large">Button</a>
<a class="btn btn-large"><i class="icon-circle icon-large"></i> Button</a>
<a class="btn btn-large"><i class="icon-circle icon-large"></i></a>
</div>
</div>
</div>
</div>
<h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3>
@ -270,6 +429,16 @@
<li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 3
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
@ -277,14 +446,26 @@
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 3</a></li>
<li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="icon-circle"></i> Nav Item 7</a></li>
</ul>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Nav Item 1</a></li>
<li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 3
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu" role="menu">
@ -292,8 +473,10 @@
<li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
</ul>
</li>
<li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 3</a></li>
<li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="icon-building icon-large"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="icon-spinner icon-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="icon-circle icon-large"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="icon-circle"></i> Nav Item 7</a></li>
</ul>