updating bugs and doc

This commit is contained in:
Dave Gandy 2012-03-09 00:05:04 -05:00
parent 843ccbfad3
commit 775a40bec6
5 changed files with 102 additions and 33 deletions

View File

@ -1,3 +1,26 @@
/* Font Awesome
the iconic font designed for use with Twitter Bootstrap
-------------------------------------------------------
The full suite of pictographic icons, examples, and documentation
can be found at: http://fortawesome.github.com/Font-Awesome/
License
-------------------------------------------------------
The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
http://creativecommons.org/licenses/by/3.0/ A mention of
'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
source code is considered acceptable attribution (most common on the web).
If human readable source code is not available to the end user, a mention in
an 'About' or 'Credits' screen is considered acceptable (most common in desktop
or mobile software).
Contact
-------------------------------------------------------
Email: dave@davegandy.com
Twitter: http://twitter.com/fortaweso_me
Work: http://lemonwi.se co-founder
*/
@font-face { @font-face {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot');
@ -10,11 +33,20 @@
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
display: inline-block; display: inline-block;
text-decoration: inherit;
} }
a [class^="icon-"], a [class*=" icon-"] {
display: inline-block;
text-decoration: inherit;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before { .icon-large:before {
vertical-align: top;
font-size: 1.3333333333333333em; font-size: 1.3333333333333333em;
} }
.btn [class^="icon-"], .btn [class*=" icon-"] { .btn [class^="icon-"], .btn [class*=" icon-"] {
/* keeps button heights with and without icons the same */
line-height: .9em; line-height: .9em;
} }
li [class^="icon-"], li [class*=" icon-"] { li [class^="icon-"], li [class*=" icon-"] {
@ -23,6 +55,8 @@ li [class^="icon-"], li [class*=" icon-"] {
text-align: center; text-align: center;
} }
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] { li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
/* 1.5 increased font size for icon-large * 1.25 width */
width: 1.875em; width: 1.875em;
} }
li[class^="icon-"], li[class*=" icon-"] { li[class^="icon-"], li[class*=" icon-"] {
@ -36,6 +70,8 @@ li[class^="icon-"]:before, li[class*=" icon-"]:before {
li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before { li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
text-indent: -1.3333333333333333em; text-indent: -1.3333333333333333em;
} }
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before { .icon-glass:before {
content: "\f000"; content: "\f000";
} }

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,27 @@
/* Font Awesome
the iconic font designed for use with Twitter Bootstrap
-------------------------------------------------------
The full suite of pictographic icons, examples, and documentation
can be found at: http://fortawesome.github.com/Font-Awesome/
License
-------------------------------------------------------
The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
http://creativecommons.org/licenses/by/3.0/ A mention of
'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
source code is considered acceptable attribution (most common on the web).
If human readable source code is not available to the end user, a mention in
an 'About' or 'Credits' screen is considered acceptable (most common in desktop
or mobile software).
Contact
-------------------------------------------------------
Email: dave@davegandy.com
Twitter: http://twitter.com/fortaweso_me
Work: http://lemonwi.se co-founder
*/
@font-face { @font-face {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot');
@ -10,29 +34,32 @@
font-style: normal; font-style: normal;
} }
// ICONS
// Glyphs and icons for buttons, nav, and more
// -------------------------------------------
// Font Awesome courtesy of Dave Gandy at fortaweso.me/font-awesome
[class^="icon-"]:before, [class^="icon-"]:before,
[class*=" icon-"]:before { [class*=" icon-"]:before {
font-family: FontAwesome; font-family: FontAwesome;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
display: inline-block; display: inline-block;
text-decoration: inherit;
} }
// makes the font 33% larger relative to the icon container a [class^="icon-"],
a [class*=" icon-"] {
display: inline-block;
text-decoration: inherit;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before { .icon-large:before {
// display: inline-block; vertical-align: top;
font-size: 4/3em; font-size: 4/3em;
} }
.btn { .btn {
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
line-height: .9em; // keeps button heights with and without icons the same /* keeps button heights with and without icons the same */
line-height: .9em;
} }
} }
@ -45,7 +72,8 @@ li {
} }
.icon-large[class^="icon-"], .icon-large[class^="icon-"],
.icon-large[class*=" icon-"] { .icon-large[class*=" icon-"] {
width: 1.5*1.25em; // 1.5 increased font size for icon-large * 1.25 width /* 1.5 increased font size for icon-large * 1.25 width */
width: 1.5*1.25em;
} }
} }
@ -63,8 +91,8 @@ li[class*=" icon-"] {
} }
} }
// Uses Unicode Private Use Area (PUA) to ensure screen readers do not read off /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
// random characters that represent icons readers do not read off random characters that represent icons */
.icon-glass:before { content: "\f000"; } .icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; } .icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; } .icon-search:before { content: "\f002"; }

View File

@ -44,13 +44,16 @@ h1, h2, h3, h4, h5, h6 { font-family: @baseHeaderFontFamily; }
} }
} }
a[href^='http://']:after { a[href^='http://'] {
display: inline-block;
&:after {
font-family: FontAwesome; font-family: FontAwesome;
content: "\0020 \f08e"; content: "\0020 \f08e";
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
} }
}
.hero-unit { .hero-unit {
background-color: @red; background-color: @red;
@ -116,10 +119,6 @@ a[href^='http://']:after {
} }
} }
/*section {*/
/*margin: 30px 0;*/
/*}*/
.the-icons { .the-icons {
li[class^="icon-"], li[class^="icon-"],
li[class*=" icon-"] { li[class*=" icon-"] {
@ -193,10 +192,7 @@ a[href^='http://']:after {
span.star:hover:before, span.star:hover ~ span.star:before { span.star:hover:before, span.star:hover ~ span.star:before {
content: "\f005"; // solid star content: "\f005"; // solid star
color: #c49c38; color: #e3cf7a;
#gradient > .vertical(#fffeb8, #c49c38);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
} }
} }

View File

@ -114,7 +114,7 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3><i class="icon-ok icon-large"></i> Broad compatibility</h3> <h3><i class="icon-ok icon-large"></i> Broad compatibility</h3>
Wide @font-face support means Font Awesome even works in IE4 (<a href="http://www.fontsquirrel.com/fontface" target="_blank">no kidding</a>). Wide @font-face support means Font Awesome works in <a href="#roadmap" rel="tooltip" data-original-title="IE7 support coming soon">modern browsers <i class="icon-info-sign"></i></a>.
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -716,8 +716,9 @@
<h1>Roadmap</h1> <h1>Roadmap</h1>
<p>Here's the plan for future updates.</p> <p>Here's the plan for future updates.</p>
<ul> <ul>
<li class="icon-plus">Support for IE7.</li>
<li class="icon-plus">Better hinting for smaller font sizes.</li> <li class="icon-plus">Better hinting for smaller font sizes.</li>
<li class="icon-plus">More icons. Have any requests? <a href="https://github.com/FortAwesome/Font-Awesome/issues/new" target="_blank">Open an issue</a> in the Font Awesome GitHub project.</li> <li class="icon-plus">More icons. Have any requests? <a href="https://github.com/FortAwesome/Font-Awesome/issues" target="_blank">Open an issue</a> in the Font Awesome GitHub project.</li>
<li class="icon-plus">More complete Twitter Bootstrap compatibility.</li> <li class="icon-plus">More complete Twitter Bootstrap compatibility.</li>
<li class="icon-plus">Tricks and tips for super-awesome creative CSS methods, like the star example above.</li> <li class="icon-plus">Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
</ul> </ul>
@ -736,17 +737,19 @@
<div class="span8"> <div class="span8">
<h2>License</h2> <h2>License</h2>
The Font Awesome webfont, CSS, and LESS files are licensed under The Font Awesome webfont, CSS, and LESS files are licensed under
<a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.
A mention of <code>Font Awesome - http://fortawesome.github.com/Font-Awesome</code> in human-readable source code A mention of <code>Font Awesome - http://fortawesome.github.com/Font-Awesome</code> in human-readable source code
is considered acceptable attribution (most common on the web). If human readable source code is not available to is considered acceptable attribution (most common on the web). If human readable source code is not available to
the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or
mobile software). mobile software).
</div> </div>
<div class="span12">
<h2>Special Thanks</h2>
Special thanks to <a href="http://twitter.com/robmadole/" target="_blank">@robmadole</a> and
<a href="http://twitter.com/supercodepoet/" target="_blank">@supercodepoet</a> for icon design
review, advice, and some backbone.js help.
</div>
</div> </div>
</footer> </footer>
@ -827,6 +830,12 @@
interval: 5000 interval: 5000
}); });
// tooltips
$('#why').tooltip({
selector: "a[rel=tooltip]",
placement: 'bottom'
})
// make code pretty // make code pretty
window.prettyPrint && prettyPrint(); window.prettyPrint && prettyPrint();
}); });