Skip to content

Commit

Permalink
considerably better ie7 rendering, more visual test cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@davegandy
davegandy committed Jan 17, 2013
1 parent 130486b commit ffa5776
Show file tree
Hide file tree
Showing 6 changed files with 263 additions and 40 deletions.
2 changes: 1 addition & 1 deletion css/font-awesome-ie7.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/css/font-awesome-ie7.min.css
View file

Large diffs are not rendered by default.

36 changes: 28 additions & 8 deletions docs/assets/less/font-awesome-ie7.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,29 +21,49 @@
* 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;
margin-top: -4px;
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;
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ <h1>Font Awesome</h1>
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>
Expand Down
225 changes: 204 additions & 21 deletions docs/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -79,24 +79,81 @@ <h3>Icons <small>Icons should not be clipped</small></h3>
<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>


Expand All @@ -118,14 +175,16 @@ <h3>Navbar <small>should stay same height </small></h3>
</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">
Expand Down Expand Up @@ -177,6 +236,56 @@ <h4>Buttons</h4>
</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>
Expand Down Expand Up @@ -230,6 +339,56 @@ <h4>Anchors</h4>
</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>
Expand Down Expand Up @@ -270,30 +429,54 @@ <h3>Nav pills & nav tabs <small>should be same height</small></h3>
<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">
<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="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">
<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="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>


Expand Down
Loading

0 comments on commit ffa5776

Please sign in to comment.