tweaking links

This commit is contained in:
davegandy 2012-12-31 10:44:31 -06:00
parent c5a579a913
commit 3de6ec705a
4 changed files with 28 additions and 38 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -44,13 +44,6 @@
/* Font Awesome styles /* Font Awesome styles
------------------------------------------------------- */ ------------------------------------------------------- */
[class^="icon-"]:before,
[class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
/* includes sprites.less reset */ /* includes sprites.less reset */
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
@ -68,6 +61,13 @@
background-repeat: repeat; background-repeat: repeat;
} }
[class^="icon-"]:before,
[class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
/* makes sure icons active on rollover in links */ /* makes sure icons active on rollover in links */
a { a {
[class^="icon-"], [class^="icon-"],
@ -88,6 +88,9 @@ a {
display: inline; display: inline;
/* keeps button heights with and without icons the same */ /* keeps button heights with and without icons the same */
line-height: .6em; line-height: .6em;
&.icon-spin {
display: inline-block;
}
} }
} }
@ -97,7 +100,6 @@ li {
display: inline-block; display: inline-block;
width: 1.25em; width: 1.25em;
text-align: center; text-align: center;
&.icon-large,
&.icon-large { &.icon-large {
/* 1.5 increased font size for icon-large * 1.25 width */ /* 1.5 increased font size for icon-large * 1.25 width */
width: 1.25*1.25em; width: 1.25*1.25em;
@ -199,25 +201,14 @@ ul.icons {
} }
.icon-spin { .icon-spin {
display: inline-block; display: inline-block;
-moz-animation: spin 1.5s infinite linear; -moz-animation: spin 2s infinite linear;
-o-animation: spin 1.5s infinite linear; -o-animation: spin 2s infinite linear;
-webkit-animation: spin 1.5s infinite linear; -webkit-animation: spin 2s infinite linear;
animation: spin 1.5s infinite linear; animation: spin 2s infinite linear;
} }
.btn, .nav {
[class^="icon-"],
[class*=" icon-"] {
&.icon-spin {
display: inline-block;
}
}
}
@-moz-keyframes spin { @-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); } 0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); } 100% { -moz-transform: rotate(359deg); }

View file

@ -69,7 +69,6 @@
<li><a href="#contribute">Contribute</a></li> <li><a href="#contribute">Contribute</a></li>
<li><a href="#roadmap">Roadmap</a></li> <li><a href="#roadmap">Roadmap</a></li>
<li><a href="#kyruus">Kyruus</a></li> <li><a href="#kyruus">Kyruus</a></li>
<li><a href="#say-thanks">Say Thanks</a></li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><a href="mailto:dave@davegandy.com"><i class="icon-envelope"></i> Me</a></li> <li><a href="mailto:dave@davegandy.com"><i class="icon-envelope"></i> Me</a></li>
@ -174,22 +173,22 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h4><i class="icon-bullhorn"></i> Desktop Font + Vectors</h4> <h4><i class="icon-beer"></i> Free, as in Beer</h4>
The full desktop font and a pdf of vectors are included. Happy designing. 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.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-ok"></i> IE7 Support</h4> <h4><i class="icon-ok"></i> IE7 Support</h4>
Font Awesome supports IE7. If you need it, you have my condolences. Font Awesome supports IE7. If you need it, you have my condolences.
</div> </div>
<div class="span4">
<h4><i class="icon-search"></i> Screen reader compatible</h4>
Font Awesome won't trip up screen readers, unlike most icon fonts.
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h4><i class="icon-beer"></i> Free, as in Beer</h4> <h4><i class="icon-adjust"></i> Designer Friendly</h4>
Font Awesome is completely free for commercial use. Install FontAwesome.otf and <a href="design.html" target="_blank">visit the copy & paste page</a>. Happy designing.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-thumbs-up"></i> Made for Twitter Bootstrap</h4> <h4><i class="icon-thumbs-up"></i> Made for Twitter Bootstrap</h4>
@ -220,12 +219,12 @@
Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>. Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-th-large"></i> Font Sub-setting</h4> <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 href="#">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>, <a target="_blank" href="http://icnfnt.com/">sub-setting</a> is now possible, so you get just the icons you need.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-spinner icon-spin"></i> <a href="#extras">Font Awesome Extras</a></h4> <h4><i class="icon-spinner icon-spin"></i> New classes</a></h4>
<a href="#extras">New classes</a> for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more. New classes for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more.
</div> </div>
</div> </div>
</section> </section>