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

considerably better ie7 rendering, more visual test cases

Browse Source
This commit is contained in:
davegandy 2013-01-17 12:18:00 -05:00
parent 130486b09d
commit ffa57768cc
6 changed files with 263 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/font-awesome-ie7.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/font-awesome-ie7.min.css vendored
View File

File diff suppressed because one or more lines are too long

36
docs/assets/less/font-awesome-ie7.less
View File

@ -21,21 +21,16 @@
* Work: Lead Product Designer @ http://kyruus.com * Work: Lead Product Designer @ http://kyruus.com
*/ */
[class^="icon-"],
[class*=" icon-"] {
padding-right:.3em;
}
.icon-large { .icon-large {
font-size: 4/3em; font-size: 4/3em;
margin-top: -4px; margin-top: -4px;
padding-top: 3px; padding-top: 3px;
margin-bottom: -4px; margin-bottom: -4px;
padding-bottom: 3px; padding-bottom: 3px;
vertical-align: -20%; vertical-align: middle;
} }
.btn, .nav { .nav {
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
vertical-align: inherit; vertical-align: inherit;
@ -43,7 +38,32 @@
padding-top: 3px; padding-top: 3px;
margin-bottom: -4px; margin-bottom: -4px;
padding-bottom: 3px; 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;
}
} }
} }

2
docs/index.html
View File

@ -98,7 +98,7 @@
View Project<br>on GitHub</a> View Project<br>on GitHub</a>
</div> </div>
<div class="shameless-self-promotion"> <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> </div>
</div> </div>

225
docs/test.html
View File

@ -45,7 +45,7 @@
<div class="container"> <div class="container">
<h1>Visual tests</h1> <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="row">
<div class="span3"> <div class="span3">
<div class="well"> <div class="well">
@ -79,24 +79,81 @@
<i class="icon-building icon-large"></i> Building Large <i class="icon-building icon-large"></i> Building Large
</div> </div>
</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> <h3>Links with Icons <small>icon should activate link & underline</small></h3>
<div> <div class="row lead">
<a href="#"><i class="icon-building"></i> Link Here</a> <div class="span2">
<a href="#"><i class="icon-building icon-large"></i> Link Here</a> <a href="#"><i class="icon-building"></i> Link Here</a>
<a href="#"><i class="icon-caret-down"></i> Link Here</a> </div>
<a href="#">Link Here <i class="icon-double-angle-right"></i></a> <div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a> <a href="#"><i class="icon-building icon-large"></i> Link Here</a>
<a href="#">Link Here <i class="icon-caret-down"></i></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>
<div class="lead"> <div class="row">
<a href="#"><i class="icon-building"></i> Link Here</a> <div class="span2">
<a href="#"><i class="icon-building icon-large"></i> Link Here</a> <a href="#"><i class="icon-building"></i> Link Here</a>
<a href="#"><i class="icon-caret-down"></i> Link Here</a> </div>
<a href="#">Link Here <i class="icon-double-angle-right"></i></a> <div class="span2">
<a href="#">Link Here <i class="icon-double-angle-right icon-large"></i></a> <a href="#"><i class="icon-building icon-large"></i> Link Here</a>
<a href="#">Link Here <i class="icon-caret-down"></i></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>
@ -118,14 +175,16 @@
</ul> </ul>
</li> </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-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> </ul>
</div> </div>
</div> </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> <h4>Buttons</h4>
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
@ -177,6 +236,56 @@
</div> </div>
</div> </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> <h4>Anchors</h4>
@ -230,6 +339,56 @@
</div> </div>
</div> </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> <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"> <li class="dropdown active">
<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
<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> <i class="icon-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <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> <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </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-building icon-large"></i> Nav Item 4</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-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>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<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">
<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
<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> <i class="icon-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <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> <li><a href="#"><i class="icon-building icon-large"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </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-building icon-large"></i> Nav Item 4</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-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>

36
less/font-awesome-ie7.less
View File

@ -21,21 +21,16 @@
* Work: Lead Product Designer @ http://kyruus.com * Work: Lead Product Designer @ http://kyruus.com
*/ */
[class^="icon-"],
[class*=" icon-"] {
padding-right:.3em;
}
.icon-large { .icon-large {
font-size: 4/3em; font-size: 4/3em;
margin-top: -4px; margin-top: -4px;
padding-top: 3px; padding-top: 3px;
margin-bottom: -4px; margin-bottom: -4px;
padding-bottom: 3px; padding-bottom: 3px;
vertical-align: -20%; vertical-align: middle;
} }
.btn, .nav { .nav {
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
vertical-align: inherit; vertical-align: inherit;
@ -43,7 +38,32 @@
padding-top: 3px; padding-top: 3px;
margin-bottom: -4px; margin-bottom: -4px;
padding-bottom: 3px; 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;
}
} }
} }