last update to font files, hopefully

This commit is contained in:
davegandy 2013-01-01 14:24:01 -05:00
parent 3de6ec705a
commit c7965bf4ef
13 changed files with 120 additions and 73 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

View file

@ -299,3 +299,6 @@ a [class*=" icon-"] {
.icon-spinner { .ie7icon(''); }
.icon-circle { .ie7icon(''); }
.icon-reply { .ie7icon(''); }
.icon-github-alt { .ie7icon(''); }
.icon-folder-close-alt { .ie7icon(''); }
.icon-folder-open-alt { .ie7icon(''); }

View file

@ -33,9 +33,6 @@
url('@{FontAwesomePath}/fontawesome-webfont.woff') format('woff'),
url('@{FontAwesomePath}/fontawesome-webfont.ttf') format('truetype');
// url('../font/fontawesome-webfont.ttf') format('truetype'),
// url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
// src: url('../font/FontAwesome.otf') format('opentype');
font-weight: normal;
@ -101,7 +98,7 @@ li {
width: 1.25em;
text-align: center;
&.icon-large {
/* 1.5 increased font size for icon-large * 1.25 width */
/* increased font size for icon-large */
width: 1.25*1.25em;
}
}
@ -109,19 +106,12 @@ li {
ul.icons {
list-style-type: none;
margin-left: 2em;
text-indent: -.8em;
text-indent: -.75em;
li {
[class^="icon-"],
[class*=" icon-"] {
width: 1.5em;
}
.icon-large:before,
.icon-large:before {
/* 1.5 increased font size for icon-large * 1.25 width */
vertical-align: initial;
// width: 1.5*1.25em;
width: .75em;
}
}
}
@ -497,3 +487,6 @@ ul.icons {
.icon-spinner:before { content: "\f110"; }
.icon-circle:before { content: "\f111"; }
.icon-reply:before { content: "\f112"; }
.icon-github-alt:before { content: "\f113"; }
.icon-folder-close-alt:before { content: "\f114"; }
.icon-folder-open-alt:before { content: "\f115"; }

View file

@ -68,6 +68,7 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
// background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
// background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-bottom: 1px solid @redDark;
// margin-bottom: 0;
@ -121,10 +122,10 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
// margin-top: 15px;
font-weight: bold;
font-size: 18px;
padding: 13px 22px;
padding: 13px 23px 13px 22px;
// padding-left: 24px + 40;
margin-right: 10px;
.border-radius(8px);
// .border-radius(8px);
// position: relative;
text-align: left;
// i {
@ -132,9 +133,6 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
// top: 8px;
// left: 15px;
// font-size: 46px;
// }
// &.btn-github {
// padding-left: 24px + 42;
// }
}
.hero-content {
@ -149,7 +147,11 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
}
}
.btn-primary {
.btn-github {
.buttonBackground(mix(@grayLighter, @white, 50%), mix(@grayLighter, @grayLight, 50%));
}
.btn-primary, .btn-github {
color: @grayDark;
text-shadow: 0 -1px 0 rgba(255,255,255,.25);
&:hover {
@ -363,14 +365,26 @@ section {
footer {
color: @gray;
border-top: 1px solid @grayLighter;
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
background-color: @red;
border-top: 1px solid mix(@red, @redDark, 50%);
a {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
&:hover {
color: @white;
}
}
color: mix(@red, @white, 35%);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
margin-top: 60px;
padding-top: 20px;
padding-top: 45px;
padding-bottom: 60px;
*zoom: 1; // ie7 hack
ul {
margin-left: 30px;
// margin-left: 30px;
line-height: 25px;
}
}

View file

@ -40,8 +40,8 @@
// Links
// -------------------------
@linkColor: @red;
@linkColorHover: darken(@linkColor, 15%);
@linkColor: lighten(@red, 10%);
@linkColorHover: @linkColor;
// Typography

View file

@ -68,7 +68,7 @@
<li><a href="#examples">Examples</a></li>
<li><a href="#contribute">Contribute</a></li>
<li><a href="#roadmap">Roadmap</a></li>
<li><a href="#kyruus">Kyruus</a></li>
<li><a href="#license">License</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="mailto:dave@davegandy.com"><i class="icon-envelope"></i> Me</a></li>
@ -118,11 +118,10 @@
<div class="item"><div><i class="icon-edit"></i></div></div>
<div class="item"><div><i class="icon-search"></i></div></div>
<div class="item"><div><i class="icon-beer"></i></div></div>
<div class="item"><div><i class="icon-quote-left"></i></div></div>
<div class="item"><div><i class="icon-stethoscope"></i></div></div>
<div class="item"><div><i class="icon-hospital"></i></div></div>
<div class="item"><div><i class="icon-heart-empty"></i></div></div>
<div class="item"><div><i class="icon-thumbs-up"></i></div></div>
<div class="item"><div><i class="icon-flag"></i></div></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#iconCarousel" data-slide="prev"
@ -159,7 +158,7 @@
<section id="why" class="clearfix">
<div class="row">
<div class="span4">
<h4><i class="icon-flag"></i> One font, 246 icons</h4>
<h4><i class="icon-flag"></i> One font, 249 icons</h4>
In a single collection, Font Awesome is a pictographic language of web-related actions.
</div>
<div class="span4">
@ -174,20 +173,20 @@
<div class="row">
<div class="span4">
<h4><i class="icon-beer"></i> Free, as in Beer</h4>
Font Awesome is completely free for commercial use.
</div>
<div class="span4">
<h4><i class="icon-search"></i> Screen reader compatible</h4>
Font Awesome won't trip up screen readers, unlike other icon fonts.
Font Awesome is completely free for commercial use. Check out the <a href="#license">license</a>.
</div>
<div class="span4">
<h4><i class="icon-ok"></i> IE7 Support</h4>
Font Awesome supports IE7. If you need it, you have my condolences.
</div>
<div class="span4">
<h4><i class="icon-search"></i> Screen reader compatible</h4>
Font Awesome won't trip up screen readers, unlike other icon fonts.
</div>
</div>
<div class="row">
<div class="span4">
<h4><i class="icon-adjust"></i> Designer Friendly</h4>
<h4><i class="icon-tint"></i> Designer Friendly</h4>
Install FontAwesome.otf and <a href="design.html" target="_blank">visit the copy & paste page</a>. Happy designing.
</div>
<div class="span4">
@ -215,12 +214,12 @@
</div>
<div class="row">
<div class="span4">
<h4><i class="icon-beaker"></i> 37 New Icons in 3.0.0</h4>
<h4><i class="icon-beaker"></i> 40 New Icons in 3.0</h4>
Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
</div>
<div class="span4">
<h4><i class="icon-th-large"></i> <a target="_blank" href="http://icnfnt.com/">Font Sub-setting</a></h4>
Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, <a target="_blank" href="http://icnfnt.com/">sub-setting</a> is now possible, so you get just the icons you need.
Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a target="_blank" href="http://icnfnt.com/">sub-set</a> to get just the icons you need.
</div>
<div class="span4">
<h4><i class="icon-spinner icon-spin"></i> New classes</a></h4>
@ -232,7 +231,7 @@
<section id="icons-new" class="row">
<div class="span12">
<h2 class="page-header">New Icons in 3.0</h2>
<p>You asked, Font Awesome delivers with 37 shiny new icons in version 3.0. This giant set of new icons was requested on the Font Awesome GitHub project and includes icon parity with Bootstrap 2.0.3.</p>
<p>You asked, Font Awesome delivers with 40 shiny new icons in version 3.0. This giant set of new icons was requested on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.</p>
</div>
<div class="span3">
@ -260,6 +259,7 @@
<li><i class="icon-medkit"></i> icon-medkit</li>
<li><i class="icon-h-sign"></i> icon-h-sign</li>
<li><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</li>
<li><i class="icon-spinner"></i> icon-spinner</li>
</ul>
</div>
<div class="span3">
@ -272,7 +272,8 @@
<li><i class="icon-double-angle-right"></i> icon-double-angle-right</li>
<li><i class="icon-double-angle-up"></i> icon-double-angle-up</li>
<li><i class="icon-double-angle-down"></i> icon-double-angle-down</li>
<li><i class="icon-spinner"></i> icon-spinner</li>
<li><i class="icon-circle-blank"></i> icon-circle-blank</li>
<li><i class="icon-circle"></i> icon-circle</li>
</ul>
</div>
<div class="span3">
@ -281,11 +282,12 @@
<li><i class="icon-laptop"></i> icon-laptop</li>
<li><i class="icon-tablet"></i> icon-tablet</li>
<li><i class="icon-mobile-phone"></i> icon-mobile-phone</li>
<li><i class="icon-circle-blank"></i> icon-circle-blank</li>
<li><i class="icon-circle"></i> icon-circle</li>
<li><i class="icon-quote-left"></i> icon-quote-left</li>
<li><i class="icon-quote-right"></i> icon-quote-right</li>
<li><i class="icon-reply"></i> icon-reply</li>
<li><i class="icon-github-alt"></i> icon-github-alt</li>
<li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li>
<li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li>
</ul>
</div>
</section>
@ -1019,16 +1021,32 @@
</div>
</section>
<section id="contribute">
<h2 class="page-header">Contribute to Font Awesome</h2>
</section>
<section id="roadmap">
<h2 class="page-header">Roadmap</h2>
<p>Here's the plan for future updates.</p>
<ul class="icons">
<li><i class="icon-plus"></i> Easier sub-setting with icon packs.</li>
<li><i class="icon-plus"></i> 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><i class="icon-plus"></i> Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
<li><i class="icon-plus"></i>Easier sub-setting with icon packs.</li>
<li><i class="icon-plus"></i>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><i class="icon-plus"></i>Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
</ul>
</section>
<section id="license">
<h2 class="page-header">License</h2>
<ul>
<li>The Font Awesome font is licensed under the <a href="http://scripts.sil.org/OFL" target="_blank">SIL Open Font License - http://scripts.sil.org/OFL</a>.</li>
<li>Font Awesome CSS, LESS, and SASS files are licensed under the <a href="http://opensource.org/licenses/mit-license.html" target="_blank">MIT License - http://opensource.org/licenses/mit-license.html</a>.</li>
<li>The Font Awesome pictograms are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/</a></li>
<li>Attribution is no longer required in Font Awesome 3.0, but much appreciated: <code>Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome</code>.</li>
</ul>
<p></p>
<p></p>
</section>
<section id="kyruus">
<h2 class="page-header"><a href="http://kyruus.com" target="_blank">Kyruus</a></h2>
<div class="row">
@ -1121,37 +1139,38 @@
<!--</div>-->
<!--</section>-->
</div>
<footer>
<div class="row">
<div class="span4">
<h2>Contact</h2>
<ul class="icons">
<li><i class="icon-envelope"></i> Email: <a href="mailto:dave@davegandy.com">Dave Gandy</a></li>
<li><i class="icon-twitter"></i> Twitter: <a href="https://twitter.com/fortaweso_me/" target="_blank">@FortAweso_me</a></li>
<li><i class="icon-wrench"></i> Work: Lead Product Designer @ <a href="#kyruus">Kyruus</a></li>
</ul>
<div class="container">
<div class="row">
<div class="span4">
<h2>Contact</h2>
<ul class="icons">
<li><i class="icon-envelope"></i> Email: <a href="mailto:dave@davegandy.com">Dave Gandy</a></li>
<li><i class="icon-twitter"></i> Twitter: <a href="https://twitter.com/fortaweso_me/" target="_blank">@FortAweso_me</a></li>
<li><i class="icon-wrench"></i> Work: Lead Product Designer @ <a href="#kyruus">Kyruus</a></li>
</ul>
</div>
<div class="span8">
<h2>Special Thanks</h2>
<p>
Special thanks to <a href="https://twitter.com/robmadole/" target="_blank">@robmadole</a> and
<a href="https://twitter.com/supercodepoet/" target="_blank">@supercodepoet</a> for icon design
review, advice, and some backbone.js help.
</p>
<p>
Special thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and
<a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a> for developing
<a target="_blank" href="http://icnfnt.com/">icnfnt</a>, the way to sub-set Font Awesome to get just the
icons you need.
</p>
</div>
</div>
<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/" 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>
<div>
<h2>Special Thanks</h2>
Special thanks to <a href="https://twitter.com/robmadole/" target="_blank">@robmadole</a> and
<a href="https://twitter.com/supercodepoet/" target="_blank">@supercodepoet</a> for icon design
review, advice, and some backbone.js help.
</div>
</footer>
</div>
<script type="text/template" id="modal-template">
<div class="modal hide fade in">

View file

@ -307,7 +307,25 @@
</div>
</div>
<h3>Spinning icons</h3>
<h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
<div class="row">
<div class="span6">
<ul class="icons">
<li><i class="icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
<div class="span6">
<ul class="icons">
<li><i class="icon-double-angle-right icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="icon-map-marker icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="icon-building icon-large"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
<h3>Spinning icons <small>icons should be aligned well, buttons should be same height</small></h3>
<div class="row">
<div class="span6">
<div style="border: solid 1px #d3d3d3; text-align: center;">