FlandreScarle7/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome.git synced 2025-01-14 17:20:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

updating docs to use new css prefix

Browse Source
This commit is contained in:
davegandy 2013-09-30 22:07:49 -04:00
parent a3f056991c
commit e32be98c31
48 changed files with 295 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/font-awesome.css vendored
View File

@ -50,7 +50,7 @@
speak: none; speak: none;
} }
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.fa-large:before { .fa-lg:before {
font-size: 1.3333333333333333em; font-size: 1.3333333333333333em;
vertical-align: -10%; vertical-align: -10%;
} }
@ -58,14 +58,14 @@
a .fa { a .fa {
display: inline; display: inline;
} }
/* increased font size for icon-large */ /* increased font size for icon-lg */
.fa.fa-fixed-width { .fa.fa-fixed-width {
display: inline-block; display: inline-block;
width: 1.1428571428571428em; width: 1.1428571428571428em;
padding-right: 0.2857142857142857em; padding-right: 0.2857142857142857em;
text-align: right; text-align: right;
} }
.fa.fa-fixed-width.fa-large { .fa.fa-fixed-width.fa-lg {
width: 1.4285714285714286em; width: 1.4285714285714286em;
} }
.fa-ul { .fa-ul {
@ -165,8 +165,8 @@ a .fa {
background-repeat: repeat; background-repeat: repeat;
} }
/* keeps Bootstrap styles with and without icons the same */ /* keeps Bootstrap styles with and without icons the same */
.btn .fa.fa-large, .btn .fa.fa-lg,
.nav .fa.fa-large { .nav .fa.fa-lg {
line-height: .9em; line-height: .9em;
} }
.btn .fa.fa-spin, .btn .fa.fa-spin,
@ -175,15 +175,15 @@ a .fa {
} }
.nav-tabs .fa, .nav-tabs .fa,
.nav-pills .fa, .nav-pills .fa,
.nav-tabs .fa.fa-large, .nav-tabs .fa.fa-lg,
.nav-pills .fa.fa-large { .nav-pills .fa.fa-lg {
line-height: .9em; line-height: .9em;
} }
.btn .fa.pull-left.fa-2x, .btn .fa.pull-left.fa-2x,
.btn .fa.pull-right.fa-2x { .btn .fa.pull-right.fa-2x {
margin-top: .18em; margin-top: .18em;
} }
.btn .fa.fa-spin.fa-large { .btn .fa.fa-spin.fa-lg {
line-height: .8em; line-height: .8em;
} }
.btn.btn-small .fa.pull-left.fa-2x, .btn.btn-small .fa.pull-left.fa-2x,
@ -218,8 +218,7 @@ a .fa {
line-height: 2em; line-height: 2em;
vertical-align: -35%; vertical-align: -35%;
} }
.fa-stack [class^="fa-"], .fa-stack .fa {
.fa-stack [class*=" fa-"] {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;

12
css/font-awesome.min.css vendored
View File

@ -1,8 +1,8 @@
@font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}.fa{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;} @font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}.fa{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;}
.fa:before{display:inline-block;text-decoration:inherit;speak:none;} .fa:before{display:inline-block;text-decoration:inherit;speak:none;}
.fa-large:before{font-size:1.3333333333333333em;vertical-align:-10%;} .fa-lg:before{font-size:1.3333333333333333em;vertical-align:-10%;}
a .fa{display:inline;} a .fa{display:inline;}
.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-large{width:1.4285714285714286em;} .fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-lg{width:1.4285714285714286em;}
.fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;} .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;}
.fa-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;} .fa-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;}
.fa.hide{display:none;} .fa.hide{display:none;}
@ -19,17 +19,17 @@ a .fa{display:inline;}
.fa.pull-left{margin-right:.3em;} .fa.pull-left{margin-right:.3em;}
.fa.pull-right{margin-left:.3em;} .fa.pull-right{margin-left:.3em;}
.fa{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;} .fa{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;}
.btn .fa.fa-large,.nav .fa.fa-large{line-height:.9em;} .btn .fa.fa-lg,.nav .fa.fa-lg{line-height:.9em;}
.btn .fa.fa-spin,.nav .fa.fa-spin{display:inline-block;} .btn .fa.fa-spin,.nav .fa.fa-spin{display:inline-block;}
.nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-large,.nav-pills .fa.fa-large{line-height:.9em;} .nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-lg,.nav-pills .fa.fa-lg{line-height:.9em;}
.btn .fa.pull-left.fa-2x,.btn .fa.pull-right.fa-2x{margin-top:.18em;} .btn .fa.pull-left.fa-2x,.btn .fa.pull-right.fa-2x{margin-top:.18em;}
.btn .fa.fa-spin.fa-large{line-height:.8em;} .btn .fa.fa-spin.fa-lg{line-height:.8em;}
.btn.btn-small .fa.pull-left.fa-2x,.btn.btn-small .fa.pull-right.fa-2x{margin-top:.25em;} .btn.btn-small .fa.pull-left.fa-2x,.btn.btn-small .fa.pull-right.fa-2x{margin-top:.25em;}
.btn.btn-large .fa{margin-top:0;}.btn.btn-large .fa.pull-left.fa-2x,.btn.btn-large .fa.pull-right.fa-2x{margin-top:.05em;} .btn.btn-large .fa{margin-top:0;}.btn.btn-large .fa.pull-left.fa-2x,.btn.btn-large .fa.pull-right.fa-2x{margin-top:.05em;}
.btn.btn-large .fa.pull-left.fa-2x{margin-right:.2em;} .btn.btn-large .fa.pull-left.fa-2x{margin-right:.2em;}
.btn.btn-large .fa.pull-right.fa-2x{margin-left:.2em;} .btn.btn-large .fa.pull-right.fa-2x{margin-left:.2em;}
.nav-list .fa{line-height:inherit;} .nav-list .fa{line-height:inherit;}
.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack [class^="fa-"],.fa-stack [class*=" fa-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;} .fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack .fa{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;}
.fa-stack .fa-stack-base{font-size:2em;*line-height:1em;} .fa-stack .fa-stack-base{font-size:2em;*line-height:1em;}
.fa-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;} .fa-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
a .fa-stack,a .fa-spin{display:inline-block;text-decoration:none;} a .fa-stack,a .fa-spin{display:inline-block;text-decoration:none;}

6
less/bootstrap.less vendored
View File

@ -19,13 +19,13 @@
.btn, .nav { .btn, .nav {
.fa { .fa {
// display: inline; // display: inline;
&.fa-large { line-height: .9em; } &.fa-lg { line-height: .9em; }
&.fa-spin { display: inline-block; } &.fa-spin { display: inline-block; }
} }
} }
.nav-tabs, .nav-pills { .nav-tabs, .nav-pills {
.fa { .fa {
&, &.fa-large { line-height: .9em; } &, &.fa-lg { line-height: .9em; }
} }
} }
.btn { .btn {
@ -33,7 +33,7 @@
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.fa-2x { margin-top: .18em; } &.fa-2x { margin-top: .18em; }
} }
&.fa-spin.fa-large { line-height: .8em; } &.fa-spin.fa-lg { line-height: .8em; }
} }
} }
.btn.btn-small { .btn.btn-small {

6
less/core.less
View File

@ -12,7 +12,7 @@
} }
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.fa-large:before { .fa-lg:before {
font-size: (4em / 3); font-size: (4em / 3);
vertical-align: -10%; vertical-align: -10%;
} }
@ -24,14 +24,14 @@ a {
} }
} }
/* increased font size for icon-large */ /* increased font size for icon-lg */
.fa { .fa {
&.fa-fixed-width { &.fa-fixed-width {
display: inline-block; display: inline-block;
width: (16em / 14); width: (16em / 14);
padding-right: (4em / 14); padding-right: (4em / 14);
text-align: right; text-align: right;
&.fa-large { &.fa-lg {
width: (20em / 14); width: (20em / 14);
} }
} }

3
less/mixins.less
View File

@ -31,8 +31,7 @@
height: @height; height: @height;
line-height: @width; line-height: @width;
vertical-align: -35%; vertical-align: -35%;
[class^="fa-"], .fa {
[class*=" fa-"] {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;

2
src/_includes/community/requesting-new-icons.html
View File

@ -21,7 +21,7 @@
</li> </li>
<li> <li>
Concrete objects make good icons, since abstract concepts are, well, abstract. It's harder to make an icon Concrete objects make good icons, since abstract concepts are, well, abstract. It's harder to make an icon
to represent happiness. It's easier to make a smiley face. <i class="icon-smile"></i> to represent happiness. It's easier to make a smiley face. <i class="fa fa-smile"></i>
</li> </li>
</ol> </ol>
</section> </section>

10
src/_includes/examples/animated-spinner.html
View File

@ -2,18 +2,18 @@
<h2 class="page-header">Animated Spinner</h2> <h2 class="page-header">Animated Spinner</h2>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
Use the <code>icon-spin</code> class to get any icon to rotate. Works well with <code>icon-spinner</code> and Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
<code>icon-refresh</code>. <code>fa-refresh</code>, and <code>fa-cog</code>.
</div> </div>
<div class="span9"> <div class="span9">
<div class="well well-large well-transparent lead"> <div class="well well-large well-transparent lead">
<i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content... <i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
</div> </div>
{% highlight html %} {% highlight html %}
<i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content... <i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
{% endhighlight %} {% endhighlight %}
<p class="alert alert-info"> <p class="alert alert-info">
<i class="icon-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9. <i class="fa fa-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9.
</p> </p>
</div> </div>
</div> </div>

10
src/_includes/examples/bordered-pulled.html
View File

@ -3,29 +3,29 @@
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<p> <p>
Use <code>icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
article graphics. article graphics.
</p> </p>
</div> </div>
<div class="span9"> <div class="span9">
<div class="well well-large well-transparent"> <div class="well well-large well-transparent">
<i class="icon-quote-left icon-4x pull-left icon-muted"></i> <i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
of them in any combination to get lots of new possibilities. of them in any combination to get lots of new possibilities.
</div> </div>
{% highlight html %} {% highlight html %}
<i class="icon-quote-left icon-4x pull-left icon-muted"></i> <i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
Use a few of the new styles together ... lots of new possibilities. Use a few of the new styles together ... lots of new possibilities.
{% endhighlight %} {% endhighlight %}
<div class="well well-large well-transparent clearfix"> <div class="well well-large well-transparent clearfix">
<i class="icon-flag icon-4x pull-left icon-border"></i> <i class="fa fa-flag fa-4x pull-left fa-border"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
of them in any combination to get lots of new possibilities. of them in any combination to get lots of new possibilities.
</div> </div>
{% highlight html %} {% highlight html %}
<i class="icon-flag icon-4x pull-left icon-border"></i> <i class="fa fa-flag fa-4x pull-left fa-border"></i>
Use a few of the new styles together ... lots of new possibilities. Use a few of the new styles together ... lots of new possibilities.
{% endhighlight %} {% endhighlight %}
</div> </div>

30
src/_includes/examples/bulleted-lists.html
View File

@ -4,28 +4,28 @@
<div class="span12"> <div class="span12">
</div> </div>
<div class="span3"> <div class="span3">
<ul class="icons-ul"> <ul class="fa-ul">
<li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li> <li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li>
<li><i class="icon-li icon-ok"></i>Buttons</li> <li><i class="fa-li fa fa-ok"></i>Buttons</li>
<li><i class="icon-li icon-ok"></i>Button groups</li> <li><i class="fa-li fa fa-ok"></i>Button groups</li>
<li><i class="icon-li icon-ok"></i>Navigation</li> <li><i class="fa-li fa fa-ok"></i>Navigation</li>
<li><i class="icon-li icon-ok"></i>Prepended form inputs</li> <li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li>
<li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li> <li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li>
</ul> </ul>
</div> </div>
<div class="span9"> <div class="span9">
<p>Easily replace individual bullets.</p> <p>Easily replace individual bullets.</p>
{% highlight html %} {% highlight html %}
<ul class="icons-ul"> <ul class="fa-ul">
<li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li> <li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li>
<li><i class="icon-li icon-ok"></i>Buttons</li> <li><i class="fa-li fa fa-ok"></i>Buttons</li>
<li><i class="icon-li icon-ok"></i>Button groups</li> <li><i class="fa-li fa fa-ok"></i>Button groups</li>
<li><i class="icon-li icon-ok"></i>Navigation</li> <li><i class="fa-li fa fa-ok"></i>Navigation</li>
<li><i class="icon-li icon-ok"></i>Prepended form inputs</li> <li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li>
<li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li> <li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"><i class="icon-info-sign"></i> Make sure to NOT include any whitespace after the icon declaration.</div> <div class="alert alert-info"><i class="fa fa-info-sign"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
</div> </div>
</div> </div>
</section> </section>

22
src/_includes/examples/button-dropdowns.html
View File

@ -3,13 +3,13 @@
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<div class="btn-group open"> <div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a> <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="icon-caret-down"></span></a> <span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li>
<li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li> <li><a href="#"><i class="fa fa-trash fa-fixed-width"></i> Delete</a></li>
<li><a href="#"><i class="icon-fixed-width icon-ban-circle"></i> Ban</a></li> <li><a href="#"><i class="fa fa-ban-circle fa-fixed-width"></i> Ban</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li> <li><a href="#"><i class="i"></i> Make admin</a></li>
</ul> </ul>
@ -18,19 +18,19 @@
<div class="span9"> <div class="span9">
{% highlight html %} {% highlight html %}
<div class="btn-group open"> <div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a> <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="icon-caret-down"></span></a> <span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li>
<li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li> <li><a href="#"><i class="fa fa-trash fa-fixed-width"></i> Delete</a></li>
<li><a href="#"><i class="icon-fixed-width icon-ban-circle"></i> Ban</a></li> <li><a href="#"><i class="fa fa-ban-circle fa-fixed-width"></i> Ban</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li> <li><a href="#"><i class="i"></i> Make admin</a></li>
</ul> </ul>
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"><i class="icon-info-sign"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div> <div class="alert alert-info"><i class="fa fa-info-sign"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
</div> </div>
</div> </div>
</section> </section>

16
src/_includes/examples/button-groups.html
View File

@ -4,20 +4,20 @@
<div class="span3"> <div class="span3">
<p> <p>
<div class="btn-group"> <div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a> <a class="btn" href="#"><i class="fa fa-align-justify"></i></a>
</div> </div>
</p> </p>
</div> </div>
<div class="span9"> <div class="span9">
{% highlight html %} {% highlight html %}
<div class="btn-group"> <div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a> <a class="btn" href="#"><i class="fa fa-align-justify"></i></a>
</div> </div>
{% endhighlight %} {% endhighlight %}
</div> </div>

34
src/_includes/examples/buttons.html
View File

@ -4,53 +4,53 @@
<div class="span3"> <div class="span3">
<p> <p>
<a class="btn" href="#"> <a class="btn" href="#">
<i class="icon-repeat"></i> Reload</a> <i class="fa fa-repeat"></i> Reload</a>
<a class="btn btn-success" href="#"> <a class="btn btn-success" href="#">
<i class="icon-shopping-cart icon-large"></i> Checkout</a> <i class="fa fa-shopping-cart fa-lg"></i> Checkout</a>
</p> </p>
<p> <p>
<a class="btn btn-large btn-primary" href="#"> <a class="btn btn-large btn-primary" href="#">
<i class="icon-comment"></i> Comment</a> <i class="fa fa-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#"> <a class="btn btn-small btn-info" href="#">
<i class="icon-info-sign"></i> Info</a> <i class="fa fa-info-sign"></i> Info</a>
</p> </p>
<p> <p>
<a class="btn btn-danger" href="#"> <a class="btn btn-danger" href="#">
<i class="icon-trash icon-large"></i> Delete</a> <i class="fa fa-trash fa-lg"></i> Delete</a>
<a class="btn btn-small" href="#"> <a class="btn btn-small" href="#">
<i class="icon-cog"></i> Settings</a> <i class="fa fa-cog"></i> Settings</a>
</p> </p>
<p> <p>
<a class="btn btn-large btn-danger" href="#"> <a class="btn btn-large btn-danger" href="#">
<i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
</p> </p>
<p> <p>
<a class="btn btn-primary" href="#"> <a class="btn btn-primary" href="#">
<i class="icon-refresh icon-spin"></i> Synchronizing Content...</a> <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>
</p> </p>
</div> </div>
<div class="span9"> <div class="span9">
<p> <p>
Font Awesome icons work great in buttons. You can even combine them with larger icon styles, Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
<code>pull-right</code> and <code>pull-left</code>, and <code>icon-spin</code>. <code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>.
</p> </p>
{% highlight html %} {% highlight html %}
<a class="btn" href="#"> <a class="btn" href="#">
<i class="icon-repeat"></i> Reload</a> <i class="fa fa-repeat"></i> Reload</a>
<a class="btn btn-success" href="#"> <a class="btn btn-success" href="#">
<i class="icon-shopping-cart icon-large"></i> Checkout</a> <i class="fa fa-shopping-cart fa-lg"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#"> <a class="btn btn-large btn-primary" href="#">
<i class="icon-comment"></i> Comment</a> <i class="fa fa-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#"> <a class="btn btn-small btn-info" href="#">
<i class="icon-info-sign"></i> Info</a> <i class="fa fa-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#"> <a class="btn btn-danger" href="#">
<i class="icon-trash icon-large"></i> Delete</a> <i class="fa fa-trash fa-lg"></i> Delete</a>
<a class="btn btn-small" href="#"> <a class="btn btn-small" href="#">
<i class="icon-cog"></i> Settings</a> <i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-large btn-danger" href="#"> <a class="btn btn-large btn-danger" href="#">
<i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<a class="btn btn-primary" href="#"> <a class="btn btn-primary" href="#">
<i class="icon-refresh icon-spin"></i> Synchronizing Content...</a> <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>

8
src/_includes/examples/form-inputs.html
View File

@ -4,11 +4,11 @@
<div class="span3"> <div class="span3">
<form> <form>
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span> <span class="add-on"><i class="fa fa-envelope"></i></span>
<input class="span2" type="text" placeholder="Email address"> <input class="span2" type="text" placeholder="Email address">
</div> </div>
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="icon-key"></i></span> <span class="add-on"><i class="fa fa-key"></i></span>
<input class="span2" type="password" placeholder="Password"> <input class="span2" type="password" placeholder="Password">
</div> </div>
</form> </form>
@ -17,11 +17,11 @@
{% highlight html %} {% highlight html %}
<form> <form>
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span> <span class="add-on"><i class="fa fa-envelope"></i></span>
<input class="span2" type="text" placeholder="Email address"> <input class="span2" type="text" placeholder="Email address">
</div> </div>
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="icon-key"></i></span> <span class="add-on"><i class="fa fa-key"></i></span>
<input class="span2" type="password" placeholder="Password"> <input class="span2" type="password" placeholder="Password">
</div> </div>
</form> </form>

6
src/_includes/examples/inline-icons.html
View File

@ -7,13 +7,13 @@
<div class="span9"> <div class="span9">
<div class="well well-transparent"> <div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;"> <div style="font-size: 24px; line-height: 1.5em;">
<i class="icon-camera-retro"></i> icon-camera-retro <i class="fa fa-camera-retro"></i> icon-camera-retro
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<i class="icon-camera-retro"></i> icon-camera-retro <i class="fa fa-camera-retro"></i> icon-camera-retro
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div> <div class="alert alert-info"><i class="fa fa-info-sign"></i> Icon classes are echoed via CSS :before.</div>
</div> </div>
</div> </div>
</section> </section>

26
src/_includes/examples/larger-icons.html
View File

@ -3,31 +3,31 @@
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
<p> <p>
To increase the size of icons relative to its container, use <code>icon-large</code>, <code>icon-2x</code>, To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>,
<code>icon-3x</code>, or <code>icon-4x</code>. <code>fa-3x</code>, or <code>fa-4x</code>.
</p> </p>
</div> </div>
<div class="span9"> <div class="span9">
<p> <p>
Increase the icon size by using the <code>icon-large</code> (33% increase), <code>icon-2x</code>, Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
<code>icon-3x</code>, or <code>icon-4x</code> classes. <code>fa-3x</code>, or <code>fa-4x</code> classes.
</p> </p>
<div class="well well-transparent"> <div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;"> <div style="font-size: 24px; line-height: 1.5em;">
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"> <div class="alert alert-info">
<i class="icon-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have <i class="fa fa-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height. sufficient line-height.
</div> </div>
</div> </div>

16
src/_includes/examples/navigation.html
View File

@ -4,10 +4,10 @@
<div class="span3"> <div class="span3">
<div class="well" style="padding: 8px 0;"> <div class="well" style="padding: 8px 0;">
<ul class="nav nav-list"> <ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li> <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li>
<li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li> <li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li>
<li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li> <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li>
<li><a href="#"><i class="icon-fixed-width icon-cogs"></i> Settings</a></li> <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -15,10 +15,10 @@
<p>Use Font Awesome icons in navigation to provide helpful visual cues.</p> <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
{% highlight html %} {% highlight html %}
<ul class="nav nav-list"> <ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li> <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li>
<li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li> <li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li>
<li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li> <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li>
<li><a href="#"><i class="icon-fixed-width icon-cogs"></i> Settings</a></li> <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div> </div>

46
src/_includes/examples/new.html
View File

@ -4,42 +4,42 @@
<div class="span4"> <div class="span4">
<h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4> <h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
<div class="well well-transparent"> <div class="well well-transparent">
<i class="icon-shield"></i>&nbsp; normal<br> <i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br> <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br> <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br> <i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br> <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
</div> </div>
</div> </div>
<div class="span4"> <div class="span4">
<h4><a href="#stacked">Stacked Icons</a></h4> <h4><a href="#stacked">Stacked Icons</a></h4>
<div class="well well-transparent stacked"> <div class="well well-transparent stacked">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-check-empty icon-stack-base"></i> <i class="fa fa-unchecked fa-stack-base"></i>
<i class="icon-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
icon-twitter on icon-check-empty<br> fa-twitter on fa-check-empty<br>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="icon-flag icon-light"></i> <i class="fa fa-flag fa-light"></i>
</span> </span>
icon-flag on icon-circle<br> fa-flag on fa-circle<br>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-sign-blank icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="icon-terminal icon-light"></i> <i class="fa fa-terminal fa-light"></i>
</span> </span>
icon-terminal on icon-sign-blank fa-terminal on fa-sign-blank
</div> </div>
</div> </div>
<div class="span4"> <div class="span4">
<h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4> <h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
<div class="well well-transparent"> <div class="well well-transparent">
<ul class="icons-ul"> <ul class="fa-ul">
<li><i class="icon-li icon-chevron-sign-right"></i>New bulleted lists</li> <li><i class="fa fa-li fa-chevron-sign-right"></i>New bulleted lists</li>
<li><i class="icon-li icon-bullseye"></i>Fix some old bugs</li> <li><i class="fa fa-li fa-bullseye"></i>Fix some old bugs</li>
<li><i class="icon-li icon-play-sign"></i>And deal with arbitrary</li> <li><i class="fa fa-li fa-play-sign"></i>And deal with arbitrary</li>
<li><i class="icon-li icon-ok-sign"></i>Font sizes better</li> <li><i class="fa fa-li fa-ok-sign"></i>Font sizes better</li>
</ul> </ul>
</div> </div>
</div> </div>

26
src/_includes/examples/rotated-flipped.html
View File

@ -6,23 +6,23 @@
</div> </div>
<div class="span9"> <div class="span9">
<div class="well well-large well-transparent lead"> <div class="well well-large well-transparent lead">
<i class="icon-shield"></i>&nbsp; normal<br> <i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br> <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br> <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br> <i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br> <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
</div> </div>
{% highlight html %} {% highlight html %}
<i class="icon-shield"></i>&nbsp; normal<br> <i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br> <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br> <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br> <i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br> <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
{% endhighlight %} {% endhighlight %}
<p class="alert alert-info"> <p class="alert alert-info">
<i class="icon-info-sign"></i> Rotating and flipping icons aren't yet supported in IE7. <i class="fa fa-info-sign"></i> Rotating and flipping icons aren't yet supported in IE7.
</p> </p>
</div> </div>
</div> </div>

68
src/_includes/examples/stacked.html
View File

@ -2,53 +2,53 @@
<h2 class="page-header">Stacked Icons</h2> <h2 class="page-header">Stacked Icons</h2>
<div class="row"> <div class="row">
<div class="span3"> <div class="span3">
A method for easily stacking multiple icons. Use the <code>icon-stack</code> class on the parent and A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and
<code>icon-stack-base</code> for the bottom icon. <code>fa-stack-base</code> for the bottom icon.
</div> </div>
<div class="span9"> <div class="span9">
<div class="well well-large well-transparent lead"> <div class="well well-large well-transparent lead">
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-check-empty icon-stack-base"></i> <i class="fa fa-check-empty fa-stack-base"></i>
<i class="icon-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
icon-twitter on icon-check-empty<br> fa-twitter on fa-check-empty<br>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="icon-flag icon-light"></i> <i class="fa fa-flag fa-light"></i>
</span> </span>
icon-flag on icon-circle<br> fa-flag on fa-circle<br>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-sign-blank icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="icon-terminal icon-light"></i> <i class="fa fa-terminal fa-light"></i>
</span> </span>
icon-terminal on icon-sign-blank<br> fa-terminal on fa-sign-blank<br>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-camera"></i> <i class="fa fa-camera"></i>
<i class="icon-ban-circle icon-stack-base text-error"></i> <i class="fa fa-ban-circle fa-stack-base text-error"></i>
</span> </span>
icon-camera on icon-ban-circle fa-camera on fa-ban-circle
</div> </div>
{% highlight html %} {% highlight html %}
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-check-empty icon-stack-base"></i> <i class="fa fa-check-empty fa-stack-base"></i>
<i class="icon-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
icon-twitter on icon-check-empty<br> fa-twitter on fa-check-empty<br>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-circle icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="icon-flag icon-light"></i> <i class="fa fa-flag fa-light"></i>
</span> </span>
icon-flag on icon-circle<br> fa-flag on fa-circle<br>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-sign-blank icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="icon-terminal icon-light"></i> <i class="fa fa-terminal fa-light"></i>
</span> </span>
icon-terminal on icon-sign-blank<br> fa-terminal on fa-sign-blank<br>
<span class="icon-stack"> <span class="fa-stack">
<i class="icon-camera"></i> <i class="fa fa-camera"></i>
<i class="icon-ban-circle icon-stack-base text-error"></i> <i class="fa fa-ban-circle fa-stack-base text-error"></i>
</span> </span>
icon-camera on icon-ban-circle fa-camera on fa-ban-circle
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>

4
src/_includes/footer.html
View File

@ -1,7 +1,7 @@
<footer class="footer hidden-print"> <footer class="footer hidden-print">
<div class="container text-center"> <div class="container text-center">
<div> <div>
<i class="icon-flag"></i> Font Awesome {{ site.fontawesome.version }} <i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
<span class="hidden-phone">&middot;</span><br class="visible-phone"> <span class="hidden-phone">&middot;</span><br class="visible-phone">
Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a> Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div> </div>
@ -13,7 +13,7 @@
Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a> Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
</div> </div>
<div> <div>
Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN for Font Awesome</a> Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN for Font Awesome</a>
</div> </div>
<div class="project"> <div class="project">
<a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot; <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;

4
src/_includes/get-started.html
View File

@ -18,7 +18,7 @@
<link href="//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.css" rel="stylesheet">
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info margin-top"> <div class="alert alert-info margin-top">
<i class="icon-info-sign"></i> Want to use Font Awesome by itself without Bootstrap? Just don't include the first line. <i class="fa fa-info-sign"></i> Want to use Font Awesome by itself without Bootstrap? Just don't include the first line.
</div> </div>
</li> </li>
<li> <li>
@ -66,7 +66,7 @@
{% highlight html %} {% highlight html %}
@FontAwesomePath: "../font"; @FontAwesomePath: "../font";
{% endhighlight %} {% endhighlight %}
<p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your compiled CSS directory.</p> <p class="alert alert-info"><i class="fa fa-info-sign"></i> The font path is relative from your compiled CSS directory.</p>
</li> </li>
<li>Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.</li> <li>Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.</li>
<li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li> <li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>

2
src/_includes/icons/brand.html
View File

@ -9,7 +9,7 @@
{% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %} {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
{% for icon in icons_brand %} {% for icon in icons_brand %}
<div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>
</section> </section>

2
src/_includes/icons/currency.html
View File

@ -5,7 +5,7 @@
{% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %} {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
{% for icon in icons_currency %} {% for icon in icons_currency %}
<div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/directional.html
View File

@ -5,7 +5,7 @@
{% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %} {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
{% for icon in icons_directional %} {% for icon in icons_directional %}
<div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/medical.html
View File

@ -5,7 +5,7 @@
{% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %} {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
{% for icon in icons_medical %} {% for icon in icons_medical %}
<div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/new.html
View File

@ -11,7 +11,7 @@
{% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %} {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %}
{% for icon in icons_new %} {% for icon in icons_new %}
<div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/text-editor.html
View File

@ -5,7 +5,7 @@
{% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %} {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
{% for icon in icons_text_editor %} {% for icon in icons_text_editor %}
<div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/video-player.html
View File

@ -5,7 +5,7 @@
{% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %} {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
{% for icon in icons_video_player %} {% for icon in icons_video_player %}
<div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/web-application.html
View File

@ -5,7 +5,7 @@
{% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %} {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
{% for icon in icons_web_application %} {% for icon in icons_web_application %}
<div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

30
src/_includes/jumbotron-slider.html
View File

@ -8,7 +8,7 @@
<div class="actions"> <div class="actions">
<a class="btn btn-primary btn-large" href="{{ page.relative_path }}assets/font-awesome.zip" <a class="btn btn-primary btn-large" href="{{ page.relative_path }}assets/font-awesome.zip"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);"> onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
<i class="icon-download-alt icon-large"></i>&nbsp;&nbsp; <i class="fa fa-download-alt fa-lg"></i>&nbsp;&nbsp;
Download Download
</a> </a>
</div> </div>
@ -25,26 +25,26 @@
<div id="iconCarousel" class="carousel slide"> <div id="iconCarousel" class="carousel slide">
<!-- Carousel items --> <!-- Carousel items -->
<div class="carousel-inner"> <div class="carousel-inner">
<div class="active item"><div><i class="icon-flag"></i></div></div> <div class="active item"><div><i class="fa fa-flag"></i></div></div>
<div class="item"><div><i class="icon-compass"></i></div></div> <div class="item"><div><i class="fa fa-compass"></i></div></div>
<div class="item"><div><i class="icon-rocket"></i></div></div> <div class="item"><div><i class="fa fa-rocket"></i></div></div>
<div class="item"><div><i class="icon-shield"></i></div></div> <div class="item"><div><i class="fa fa-shield"></i></div></div>
<div class="item"><div><i class="icon-star-half-empty"></i></div></div> <div class="item"><div><i class="fa fa-star-half-empty"></i></div></div>
<div class="item"><div><i class="icon-envelope-alt"></i></div></div> <div class="item"><div><i class="fa fa-envelope-alt"></i></div></div>
<div class="item"><div><i class="icon-medkit"></i></div></div> <div class="item"><div><i class="fa fa-medkit"></i></div></div>
<div class="item"><div><i class="icon-book"></i></div></div> <div class="item"><div><i class="fa fa-book"></i></div></div>
<div class="item"><div><i class="icon-fighter-jet"></i></div></div> <div class="item"><div><i class="fa fa-fighter-jet"></i></div></div>
<div class="item"><div><i class="icon-beer"></i></div></div> <div class="item"><div><i class="fa fa-beer"></i></div></div>
<div class="item"><div><i class="icon-heart-empty"></i></div></div> <div class="item"><div><i class="fa fa-heart-empty"></i></div></div>
<div class="item"><div><i class="icon-thumbs-up"></i></div></div> <div class="item"><div><i class="fa fa-thumbs-up"></i></div></div>
</div> </div>
<!-- Carousel nav --> <!-- Carousel nav -->
<a class="carousel-control left" href="#iconCarousel" data-slide="prev" <a class="carousel-control left" href="#iconCarousel" data-slide="prev"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);"> onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
<i class="icon-circle-arrow-left"></i></a> <i class="fa fa-circle-arrow-left"></i></a>
<a class="carousel-control right" href="#iconCarousel" data-slide="next" <a class="carousel-control right" href="#iconCarousel" data-slide="next"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);"> onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
<i class="icon-circle-arrow-right"></i></a> <i class="fa fa-circle-arrow-right"></i></a>
</div> </div>
</div> </div>
</div> </div>

4
src/_includes/license.html
View File

@ -8,9 +8,9 @@
<div> <div>
<div class="alert alert-info"> <div class="alert alert-info">
<ul class="icons-ul margin-bottom-none"> <ul class="fa-ul margin-bottom-none">
<li> <li>
<i class="icon-li icon-info-sign icon-large"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: <i class="fa-li fa fa-info-sign fa-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated:
"Font Awesome by Dave Gandy - http://fontawesome.io". "Font Awesome by Dave Gandy - http://fontawesome.io".
</li> </li>
</ul> </ul>

24
src/_includes/navbar.html
View File

@ -7,7 +7,7 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </a>
<a class="brand" href="{{ page.relative_path }}"><i class="icon-flag"></i> Font Awesome</a> <a class="brand" href="{{ page.relative_path }}"><i class="fa fa-flag"></i> Font Awesome</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class="hidden-tablet {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li> <li class="hidden-tablet {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
@ -15,25 +15,25 @@
<li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li> <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
<li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "icons" %} active{% endif %}"> <li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu pull-right"> <ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}icons/"><i class="icon-flag icon-fixed-width"></i>&nbsp; Icons</a></li> <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fixed-width"></i>&nbsp; Icons</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="{{ page.relative_path }}icons/#new"><i class="icon-shield icon-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li> <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-shield fa-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li>
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i>&nbsp; Web Application Icons</a></li> <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fixed-width"></i>&nbsp; Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i>&nbsp; Currency Icons</a></li> <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fixed-width"></i>&nbsp; Currency Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i>&nbsp; Text Editor Icons</a></li> <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-alt fa-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i>&nbsp; Directional Icons</a></li> <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-right fa-fixed-width"></i>&nbsp; Directional Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i>&nbsp; Video Player Icons</a></li> <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-sign fa-fixed-width"></i>&nbsp; Video Player Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i>&nbsp; Brand Icons</a></li> <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fixed-width"></i>&nbsp; Brand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i>&nbsp; Medical Icons</a></li> <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fixed-width"></i>&nbsp; Medical Icons</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li> <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "examples" %} active{% endif %}"> <li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "examples" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu pull-right"> <ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li> <li><a href="{{ page.relative_path }}examples/">Examples</a></li>

2
src/_includes/tell-me-thanks.html
View File

@ -6,7 +6,7 @@
</p> </p>
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<h3><a href="https://www.gittip.com/davegandy/"><i class="icon-gittip"></i> Tip me on Gittip</a></h3> <h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip"></i> Tip me on Gittip</a></h3>
<p> <p>
Gittip is a great way to let developers know you appreciate their work. Gittip is a great way to let developers know you appreciate their work.
</p> </p>

2
src/_includes/thanks-to.html
View File

@ -17,7 +17,7 @@
</div> </div>
<div class="span4"> <div class="span4">
<p> <p>
Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent
<a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a>, the fastest and easiest way to <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a>, the fastest and easiest way to
<a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome. <a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
</p> </p>

12
src/_includes/whats-new.html
View File

@ -10,27 +10,27 @@
<div id="whats-new"> <div id="whats-new">
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h4><i class="icon-compass"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4> <h4><i class="fa fa-compass"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>. Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-terminal"></i> SCSS Support</h4> <h4><i class="fa fa-terminal"></i> SCSS Support</h4>
A long term solution is now in place for SCSS support. Need SASS? Try <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax">sass-convert</a>. A long term solution is now in place for SCSS support. Need SASS? Try <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax">sass-convert</a>.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4> <h4><i class="fa fa-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4>
SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated. SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated.
</div> </div>
<div class="span4 margin-bottom-large"> <div class="span4 margin-bottom-large">
<h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4> <h4><i class="fa fa-magic"></i> Pixel Perfection at 14px</h4>
Version 3 was re-created from the ground up to be razor sharp at Bootstrap's default 14px. Version 3 was re-created from the ground up to be razor sharp at Bootstrap's default 14px.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4> <h4><i class="fa fa-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4>
Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need. Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-question-sign"></i> Want More Details?</h4> <h4><i class="fa fa-question-sign"></i> Want More Details?</h4>
Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see
what's new and changed. what's new and changed.
</div> </div>

18
src/_includes/why.html
View File

@ -1,40 +1,40 @@
<div id="why"> <div id="why">
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h4><i class="icon-flag"></i> One Font, {{ icons | size }} Icons</h4> <h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
In a single collection, Font Awesome is a pictographic language of web-related actions. In a single collection, Font Awesome is a pictographic language of web-related actions.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-pencil"></i> CSS Control</h4> <h4><i class="fa fa-pencil"></i> CSS Control</h4>
Easily style icon color, size, shadow, and anything that's possible with CSS. Easily style icon color, size, shadow, and anything that's possible with CSS.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-fullscreen"></i> Infinite Scalability</h4> <h4><i class="fa fa-fullscreen"></i> Infinite Scalability</h4>
Scalable vector graphics means every icon looks awesome at any size. Scalable vector graphics means every icon looks awesome at any size.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-microphone"></i> Free, as in Speech</h4> <h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>. Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-ok"></i> IE7 Support</h4> <h4><i class="fa fa-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"> <div class="span4">
<h4><i class="icon-eye-open"></i> Perfect on Retina Displays</h4> <h4><i class="fa fa-eye-open"></i> Perfect on Retina Displays</h4>
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-thumbs-up-alt"></i> Made for Bootstrap</h4> <h4><i class="fa fa-thumbs-up-alt"></i> Made for Bootstrap</h4>
Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>. Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-desktop"></i> Desktop Friendly</h4> <h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
To use on the desktop or for a complete set of vectors, To use on the desktop or for a complete set of vectors,
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>. check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</div> </div>
<div class="span4"> <div class="span4">
<h4><i class="icon-search"></i> Screen Reader Compatible</h4> <h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
Font Awesome won't trip up screen readers, unlike other icon fonts. Font Awesome won't trip up screen readers, unlike other icon fonts.
</div> </div>
</div> </div>

24
src/_layouts/icon.html
View File

@ -6,19 +6,19 @@ relative_path: ../../
<div class="jumbotron jumbotron-icon"> <div class="jumbotron jumbotron-icon">
<div class="container"> <div class="container">
<div class="info-icons"> <div class="info-icons">
<i class="icon-{{ page.icon.id }} icon-6"></i>&nbsp;&nbsp; <i class="fa fa-{{ page.icon.id }} fa-6"></i>&nbsp;&nbsp;
<span class="hidden-phone"> <span class="hidden-phone">
<i class="icon-{{ page.icon.id }} icon-5"></i>&nbsp;&nbsp; <i class="fa fa-{{ page.icon.id }} fa-5"></i>&nbsp;&nbsp;
<span class="hidden-tablet"><i class="icon-{{ page.icon.id }} icon-4"></i>&nbsp;&nbsp;</span> <span class="hidden-tablet"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span>
<i class="icon-{{ page.icon.id }} icon-3"></i>&nbsp;&nbsp; <i class="fa fa-{{ page.icon.id }} fa-3"></i>&nbsp;&nbsp;
<i class="icon-{{ page.icon.id }} icon-2"></i>&nbsp; <i class="fa fa-{{ page.icon.id }} fa-2"></i>&nbsp;
</span> </span>
<i class="icon-{{ page.icon.id }} icon-1"></i> <i class="fa fa-{{ page.icon.id }} fa-1"></i>
</div> </div>
<h1 class="info-class"> <h1 class="info-class">
icon-{{ page.icon.id }} fa-{{ page.icon.id }}
<small> <small>
<i class="icon-{{ page.icon.id }}"></i> &middot; <i class="fa fa-{{ page.icon.id }}"></i> &middot;
Unicode: <span class="upper">{{ page.icon.unicode }}</span> &middot; Unicode: <span class="upper">{{ page.icon.unicode }}</span> &middot;
Created: v{{ page.icon.created }} &middot; Created: v{{ page.icon.created }} &middot;
Categories: Categories:
@ -29,7 +29,7 @@ relative_path: ../../
{% if icon_alias_count > 0 %} {% if icon_alias_count > 0 %}
&middot; Aliases: &middot; Aliases:
{% for alias in page.icon.aliases %} {% for alias in page.icon.aliases %}
icon-{{ alias }}{% unless forloop.last %},{% endunless %} fa-{{ alias }}{% unless forloop.last %},{% endunless %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</small> </small>
@ -45,14 +45,14 @@ relative_path: ../../
<p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p> <p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
<div class="well well-transparent"> <div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;"> <div style="font-size: 24px; line-height: 1.5em;">
<i class="icon-{{ page.icon.id }}"></i> icon-{{ page.icon.id }} <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<i class="icon-{{ page.icon.id }}"></i> icon-{{ page.icon.id }} <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
{% endhighlight %} {% endhighlight %}
<br> <br>
<div class="lead"><i class="icon-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div> <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div>
</div> </div>
<div class="span3"> <div class="span3">
<div class="info-ad">{% include ads/carbon-light-vertical.html %}</div> <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>

6
src/assets/font-awesome/less/bootstrap.less vendored
View File

@ -21,13 +21,13 @@
.btn, .nav { .btn, .nav {
.{{ site.fontawesome.css_prefix }} { .{{ site.fontawesome.css_prefix }} {
// display: inline; // display: inline;
&.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; } &.{{ site.fontawesome.css_prefix }}-lg { line-height: .9em; }
&.{{ site.fontawesome.css_prefix }}-spin { display: inline-block; } &.{{ site.fontawesome.css_prefix }}-spin { display: inline-block; }
} }
} }
.nav-tabs, .nav-pills { .nav-tabs, .nav-pills {
.{{ site.fontawesome.css_prefix }} { .{{ site.fontawesome.css_prefix }} {
&, &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; } &, &.{{ site.fontawesome.css_prefix }}-lg { line-height: .9em; }
} }
} }
.btn { .btn {
@ -35,7 +35,7 @@
&.pull-left, &.pull-right { &.pull-left, &.pull-right {
&.{{ site.fontawesome.css_prefix }}-2x { margin-top: .18em; } &.{{ site.fontawesome.css_prefix }}-2x { margin-top: .18em; }
} }
&.{{ site.fontawesome.css_prefix }}-spin.{{ site.fontawesome.css_prefix }}-large { line-height: .8em; } &.{{ site.fontawesome.css_prefix }}-spin.{{ site.fontawesome.css_prefix }}-lg { line-height: .8em; }
} }
} }
.btn.btn-small { .btn.btn-small {

6
src/assets/font-awesome/less/core.less vendored
View File

@ -14,7 +14,7 @@
} }
/* makes the font 33% larger relative to the icon container */ /* makes the font 33% larger relative to the icon container */
.{{ site.fontawesome.css_prefix }}-large:before { .{{ site.fontawesome.css_prefix }}-lg:before {
font-size: (4em / 3); font-size: (4em / 3);
vertical-align: -10%; vertical-align: -10%;
} }
@ -26,14 +26,14 @@ a {
} }
} }
/* increased font size for icon-large */ /* increased font size for icon-lg */
.{{ site.fontawesome.css_prefix }} { .{{ site.fontawesome.css_prefix }} {
&.{{ site.fontawesome.css_prefix }}-fixed-width { &.{{ site.fontawesome.css_prefix }}-fixed-width {
display: inline-block; display: inline-block;
width: (16em / 14); width: (16em / 14);
padding-right: (4em / 14); padding-right: (4em / 14);
text-align: right; text-align: right;
&.{{ site.fontawesome.css_prefix }}-large { &.{{ site.fontawesome.css_prefix }}-lg {
width: (20em / 14); width: (20em / 14);
} }
} }

9
src/assets/font-awesome/less/mixins.less vendored
View File

@ -1,3 +1,5 @@
---
---
// Mixins // Mixins
// -------------------------- // --------------------------
@ -24,15 +26,14 @@
} }
.icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) { .icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
.fa-stack { .{{ site.fontawesome.css_prefix }}-stack {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: @width; width: @width;
height: @height; height: @height;
line-height: @width; line-height: @width;
vertical-align: -35%; vertical-align: -35%;
[class^="fa-"], .{{ site.fontawesome.css_prefix }} {
[class*=" fa-"] {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
@ -42,7 +43,7 @@
*line-height: @height; *line-height: @height;
text-align: center; text-align: center;
} }
.fa-stack-base { .{{ site.fontawesome.css_prefix }}-stack-base {
font-size: @base-font-size; font-size: @base-font-size;
*line-height: (@height / @base-font-size); *line-height: (@height / @base-font-size);
} }

4
src/assets/less/responsive-767px-max.less
View File

@ -46,8 +46,8 @@
} }
.jumbotron-icon { .jumbotron-icon {
.icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 0; } .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 0; }
.icon-6 { font-size: 16em; } .fa-6 { font-size: 16em; }
h1 small { h1 small {
display: block; display: block;
margin-top: 15px; margin-top: 15px;

50
src/assets/less/site.less
View File

@ -10,7 +10,7 @@
.navbar .brand { .navbar .brand {
font-family: @serifFontFamily; font-family: @serifFontFamily;
.icon-flag { padding-right: 3px; } .fa-flag { padding-right: 3px; }
} }
.navbar .nav > li > a { padding: 12px 10px 9px; } .navbar .nav > li > a { padding: 12px 10px 9px; }
@ -74,18 +74,19 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
} }
.actions { margin-top: 25px;} .actions { margin-top: 25px;}
text-shadow: 2px 2px 2px @grayDark; text-shadow: 2px 2px 2px @grayDark;
ul { // unsure if block below still in use
margin-left: 50px; // ul {
li { // margin-left: 50px;
&.icon-large:before { // li {
text-indent: -2em; // &.icon-large:before {
vertical-align: baseline; // text-indent: -2em;
} // vertical-align: baseline;
font-size: 15px; // }
line-height: 30px; // font-size: 15px;
text-shadow: 1px 1px 1px @grayDark; // line-height: 30px;
} // text-shadow: 1px 1px 1px @grayDark;
} // }
// }
.btn-large { .btn-large {
font-family: @serifFontFamily; font-family: @serifFontFamily;
font-weight: 500; font-weight: 500;
@ -157,13 +158,13 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
dd { margin-left: @horizontalComponentOffset - 85; } dd { margin-left: @horizontalComponentOffset - 85; }
} }
} }
.icon-2 { font-size: 2em; } .fa-2 { font-size: 2em; }
.icon-3 { font-size: 4em; } .fa-3 { font-size: 4em; }
.icon-4 { font-size: 7em; } .fa-4 { font-size: 7em; }
.icon-5 { font-size: 12em; } .fa-5 { font-size: 12em; }
.icon-6 { font-size: 20em; } .fa-6 { font-size: 20em; }
.icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 1/14em; } .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 1/14em; }
} }
//.info-ad { //.info-ad {
@ -232,8 +233,7 @@ section { margin-top: 40px; }
padding-left: 10px; padding-left: 10px;
.border-radius(6px); .border-radius(6px);
[class^="icon-"], .fa {
[class*=" icon-"] {
width: 32px; width: 32px;
font-size: 14px; font-size: 14px;
display: inline-block; display: inline-block;
@ -244,13 +244,12 @@ section { margin-top: 40px; }
&:hover { &:hover {
background-color: @errorBackground; background-color: @errorBackground;
text-decoration: none; text-decoration: none;
[class^="icon-"], [class*=" icon-"] { .fa {
*font-size: 28px; *font-size: 28px;
*vertical-align: middle; *vertical-align: middle;
} }
[class^="icon-"]:before, .fa:before {
[class*=" icon-"]:before {
font-size: 28px; font-size: 28px;
vertical-align: -5px; vertical-align: -5px;
} }
@ -262,8 +261,7 @@ section { margin-top: 40px; }
#why, #whats-new { #why, #whats-new {
.span4 { margin-bottom: 20px; } .span4 { margin-bottom: 20px; }
h4 { h4 {
[class^="icon-"]:before, .fa:before {
[class*=" icon-"]:before {
vertical-align: -10%; vertical-align: -10%;
font-size: 28px; font-size: 28px;
display: inline-block; display: inline-block;

2
src/community.html
View File

@ -4,7 +4,7 @@ title: The Font Awesome Community
navbar_active: community navbar_active: community
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="icon-thumbs-up-alt icon-large"></i>&nbsp; Community{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-thumbs-up-alt fa-lg"></i>&nbsp; Community{% endcapture %}
{% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %} {% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

2
src/examples.html
View File

@ -4,7 +4,7 @@ title: Font Awesome Examples
navbar_active: examples navbar_active: examples
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="icon-magic icon-large"></i>&nbsp; Examples{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-magic fa-large"></i>&nbsp; Examples{% endcapture %}
{% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %} {% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

2
src/get-started.html
View File

@ -4,7 +4,7 @@ title: Get Started with Font Awesome
navbar_active: get-started navbar_active: get-started
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="icon-cogs icon-large"></i>&nbsp; Get Started{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-cogs fa-lg"></i>&nbsp; Get Started{% endcapture %}
{% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %} {% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

2
src/icons.html
View File

@ -4,7 +4,7 @@ title: Font Awesome Icons
navbar_active: icons navbar_active: icons
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="icon-flag icon-large"></i>&nbsp; The Icons{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-flag fa-lg"></i>&nbsp; The Icons{% endcapture %}
{% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %} {% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

2
src/license.html
View File

@ -4,7 +4,7 @@ title: Font Awesome License
navbar_active: license navbar_active: license
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="icon-legal icon-large"></i>&nbsp; License{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-legal fa-lg"></i>&nbsp; License{% endcapture %}
{% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %} {% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

2
src/whats-new.html
View File

@ -4,7 +4,7 @@ title: What's New
navbar_active: whats-new navbar_active: whats-new
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="icon-lightbulb icon-large"></i>&nbsp; What's New{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-lightbulb fa-lg"></i>&nbsp; What's New{% endcapture %}
{% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %} {% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}