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-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
@ -10,11 +33,20 @@
font-weight: normal;
font-style: normal;
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 {
vertical-align: top;
font-size: 1.3333333333333333em;
}
.btn [class^="icon-"], .btn [class*=" icon-"] {
/* keeps button heights with and without icons the same */
line-height: .9em;
}
li [class^="icon-"], li [class*=" icon-"] {
@ -23,6 +55,8 @@ li [class^="icon-"], li [class*=" icon-"] {
text-align: center;
}
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
/* 1.5 increased font size for icon-large * 1.25 width */
width: 1.875em;
}
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 {
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 {
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-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
@ -10,29 +34,32 @@
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 {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
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 {
// display: inline-block;
vertical-align: top;
font-size: 4/3em;
}
.btn {
[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-"] {
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
// random characters that represent icons
/* 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 { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }

View file

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

View file

@ -31,7 +31,7 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<h3><a class="brand" href="#"><i class="icon-flag"> </i>Font Awesome</a></h3>
<h3><a class="brand" href="#"><i class="icon-flag"></i> Font Awesome</a></h3>
<ul class="nav">
<li><a href="#overview">Overview</a></li>
<li><a href="#base-icons">Base Icons</a></li>
@ -114,7 +114,7 @@
</div>
<div class="span4">
<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 class="row">
@ -716,8 +716,9 @@
<h1>Roadmap</h1>
<p>Here's the plan for future updates.</p>
<ul>
<li class="icon-plus">Support for IE7.</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">Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
</ul>
@ -736,17 +737,19 @@
<div class="span8">
<h2>License</h2>
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
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).
</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>
</footer>
@ -827,6 +830,12 @@
interval: 5000
});
// tooltips
$('#why').tooltip({
selector: "a[rel=tooltip]",
placement: 'bottom'
})
// make code pretty
window.prettyPrint && prettyPrint();
});