FlandreScarle7/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome.git synced 2025-01-13 16:50:29 +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;
}
/* makes the font 33% larger relative to the icon container */
.fa-large:before {
.fa-lg:before {
font-size: 1.3333333333333333em;
vertical-align: -10%;
}
@ -58,14 +58,14 @@
a .fa {
display: inline;
}
/* increased font size for icon-large */
/* increased font size for icon-lg */
.fa.fa-fixed-width {
display: inline-block;
width: 1.1428571428571428em;
padding-right: 0.2857142857142857em;
text-align: right;
}
.fa.fa-fixed-width.fa-large {
.fa.fa-fixed-width.fa-lg {
width: 1.4285714285714286em;
}
.fa-ul {
@ -165,8 +165,8 @@ a .fa {
background-repeat: repeat;
}
/* keeps Bootstrap styles with and without icons the same */
.btn .fa.fa-large,
.nav .fa.fa-large {
.btn .fa.fa-lg,
.nav .fa.fa-lg {
line-height: .9em;
}
.btn .fa.fa-spin,
@ -175,15 +175,15 @@ a .fa {
}
.nav-tabs .fa,
.nav-pills .fa,
.nav-tabs .fa.fa-large,
.nav-pills .fa.fa-large {
.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.fa-spin.fa-large {
.btn .fa.fa-spin.fa-lg {
line-height: .8em;
}
.btn.btn-small .fa.pull-left.fa-2x,
@ -218,8 +218,7 @@ a .fa {
line-height: 2em;
vertical-align: -35%;
}
.fa-stack [class^="fa-"],
.fa-stack [class*=" fa-"] {
.fa-stack .fa {
position: absolute;
display: block;
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;}
.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;}
.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 .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;}
.fa.hide{display:none;}
@ -19,17 +19,17 @@ a .fa{display:inline;}
.fa.pull-left{margin-right:.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;}
.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;}
.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.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-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-right.fa-2x{margin-left:.2em;}
.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-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;}

6
less/bootstrap.less vendored
View File

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

6
less/core.less
View File

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

3
less/mixins.less
View File

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

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

@ -21,7 +21,7 @@
</li>
<li>
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>
</ol>
</section>

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

@ -2,18 +2,18 @@
<h2 class="page-header">Animated Spinner</h2>
<div class="row">
<div class="span3">
Use the <code>icon-spin</code> class to get any icon to rotate. Works well with <code>icon-spinner</code> and
<code>icon-refresh</code>.
Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
<code>fa-refresh</code>, and <code>fa-cog</code>.
</div>
<div class="span9">
<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>
{% 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 %}
<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>
</div>
</div>

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

@ -3,29 +3,29 @@
<div class="row">
<div class="span3">
<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.
</p>
</div>
<div class="span9">
<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.
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.
</div>
{% 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.
{% endhighlight %}
<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.
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.
</div>
{% 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.
{% endhighlight %}
</div>

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

@ -4,28 +4,28 @@
<div class="span12">
</div>
<div class="span3">
<ul class="icons-ul">
<li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
<li><i class="icon-li icon-ok"></i>Buttons</li>
<li><i class="icon-li icon-ok"></i>Button groups</li>
<li><i class="icon-li icon-ok"></i>Navigation</li>
<li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
<li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
<ul class="fa-ul">
<li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li>
<li><i class="fa-li fa fa-ok"></i>Buttons</li>
<li><i class="fa-li fa fa-ok"></i>Button groups</li>
<li><i class="fa-li fa fa-ok"></i>Navigation</li>
<li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li>
<li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li>
</ul>
</div>
<div class="span9">
<p>Easily replace individual bullets.</p>
{% highlight html %}
<ul class="icons-ul">
<li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
<li><i class="icon-li icon-ok"></i>Buttons</li>
<li><i class="icon-li icon-ok"></i>Button groups</li>
<li><i class="icon-li icon-ok"></i>Navigation</li>
<li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
<li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
<ul class="fa-ul">
<li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li>
<li><i class="fa-li fa fa-ok"></i>Buttons</li>
<li><i class="fa-li fa fa-ok"></i>Button groups</li>
<li><i class="fa-li fa fa-ok"></i>Navigation</li>
<li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li>
<li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li>
</ul>
{% 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>
</section>

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

@ -3,13 +3,13 @@
<div class="row">
<div class="span3">
<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="#">
<span class="icon-caret-down"></span></a>
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-fixed-width icon-trash"></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-pencil fa-fixed-width"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash fa-fixed-width"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban-circle fa-fixed-width"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
@ -18,19 +18,19 @@
<div class="span9">
{% highlight html %}
<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="#">
<span class="icon-caret-down"></span></a>
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-fixed-width icon-trash"></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-pencil fa-fixed-width"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash fa-fixed-width"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban-circle fa-fixed-width"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
{% 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>
</section>

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

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

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

@ -4,53 +4,53 @@
<div class="span3">
<p>
<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="#">
<i class="icon-shopping-cart icon-large"></i> Checkout</a>
<i class="fa fa-shopping-cart fa-lg"></i> Checkout</a>
</p>
<p>
<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="#">
<i class="icon-info-sign"></i> Info</a>
<i class="fa fa-info-sign"></i> Info</a>
</p>
<p>
<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="#">
<i class="icon-cog"></i> Settings</a>
<i class="fa fa-cog"></i> Settings</a>
</p>
<p>
<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>
<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>
</div>
<div class="span9">
<p>
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>
{% highlight html %}
<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="#">
<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="#">
<i class="icon-comment"></i> Comment</a>
<i class="fa fa-comment"></i> Comment</a>
<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="#">
<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="#">
<i class="icon-cog"></i> Settings</a>
<i class="fa fa-cog"></i> Settings</a>
<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="#">
<i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
<i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>
{% endhighlight %}
</div>
</div>

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

@ -4,11 +4,11 @@
<div class="span3">
<form>
<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">
</div>
<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">
</div>
</form>
@ -17,11 +17,11 @@
{% highlight html %}
<form>
<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">
</div>
<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">
</div>
</form>

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

@ -7,13 +7,13 @@
<div class="span9">
<div class="well well-transparent">
<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>
{% highlight html %}
<i class="icon-camera-retro"></i> icon-camera-retro
<i class="fa fa-camera-retro"></i> icon-camera-retro
{% 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>
</section>

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

@ -3,31 +3,31 @@
<div class="row">
<div class="span3">
<p>
To increase the size of icons relative to its container, use <code>icon-large</code>, <code>icon-2x</code>,
<code>icon-3x</code>, or <code>icon-4x</code>.
To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>,
<code>fa-3x</code>, or <code>fa-4x</code>.
</p>
</div>
<div class="span9">
<p>
Increase the icon size by using the <code>icon-large</code> (33% increase), <code>icon-2x</code>,
<code>icon-3x</code>, or <code>icon-4x</code> classes.
Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
<code>fa-3x</code>, or <code>fa-4x</code> classes.
</p>
<div class="well well-transparent">
<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="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
</div>
</div>
{% highlight html %}
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
{% endhighlight %}
<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.
</div>
</div>

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

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

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

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

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

@ -6,23 +6,23 @@
</div>
<div class="span9">
<div class="well well-large well-transparent lead">
<i class="icon-shield"></i>&nbsp; normal<br>
<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical
<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
</div>
{% highlight html %}
<i class="icon-shield"></i>&nbsp; normal<br>
<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical
<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
{% endhighlight %}
<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>
</div>
</div>

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

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

4
src/_includes/footer.html
View File

@ -1,7 +1,7 @@
<footer class="footer hidden-print">
<div class="container text-center">
<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">
Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div>
@ -13,7 +13,7 @@
Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
</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 class="project">
<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">
{% endhighlight %}
<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>
</li>
<li>
@ -66,7 +66,7 @@
{% highlight html %}
@FontAwesomePath: "../font";
{% 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>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>

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

@ -9,7 +9,7 @@
{% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
{% 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 %}
</div>
</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' %}
{% 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 %}
</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' %}
{% 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 %}
</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' %}
{% 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 %}
</div>

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

@ -11,7 +11,7 @@
{% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %}
{% 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 %}
</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' %}
{% 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 %}
</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' %}
{% 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 %}
</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' %}
{% 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 %}
</div>

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

@ -8,7 +8,7 @@
<div class="actions">
<a class="btn btn-primary btn-large" href="{{ page.relative_path }}assets/font-awesome.zip"
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
</a>
</div>
@ -25,26 +25,26 @@
<div id="iconCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><div><i class="icon-flag"></i></div></div>
<div class="item"><div><i class="icon-compass"></i></div></div>
<div class="item"><div><i class="icon-rocket"></i></div></div>
<div class="item"><div><i class="icon-shield"></i></div></div>
<div class="item"><div><i class="icon-star-half-empty"></i></div></div>
<div class="item"><div><i class="icon-envelope-alt"></i></div></div>
<div class="item"><div><i class="icon-medkit"></i></div></div>
<div class="item"><div><i class="icon-book"></i></div></div>
<div class="item"><div><i class="icon-fighter-jet"></i></div></div>
<div class="item"><div><i class="icon-beer"></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="active item"><div><i class="fa fa-flag"></i></div></div>
<div class="item"><div><i class="fa fa-compass"></i></div></div>
<div class="item"><div><i class="fa fa-rocket"></i></div></div>
<div class="item"><div><i class="fa fa-shield"></i></div></div>
<div class="item"><div><i class="fa fa-star-half-empty"></i></div></div>
<div class="item"><div><i class="fa fa-envelope-alt"></i></div></div>
<div class="item"><div><i class="fa fa-medkit"></i></div></div>
<div class="item"><div><i class="fa fa-book"></i></div></div>
<div class="item"><div><i class="fa fa-fighter-jet"></i></div></div>
<div class="item"><div><i class="fa fa-beer"></i></div></div>
<div class="item"><div><i class="fa fa-heart-empty"></i></div></div>
<div class="item"><div><i class="fa fa-thumbs-up"></i></div></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#iconCarousel" data-slide="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"
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>

4
src/_includes/license.html
View File

@ -8,9 +8,9 @@
<div>
<div class="alert alert-info">
<ul class="icons-ul margin-bottom-none">
<ul class="fa-ul margin-bottom-none">
<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".
</li>
</ul>

24
src/_includes/navbar.html
View File

@ -7,7 +7,7 @@
<span class="icon-bar"></span>
</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">
<ul class="nav">
<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 dropdown-split-right hidden-phone{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-caret-down"></i>
<i class="fa fa-caret-down"></i>
</a>
<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><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/#web-application"><i class="icon-camera-retro icon-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/#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/#directional"><i class="icon-hand-right icon-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/#brand"><i class="icon-github icon-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/#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="fa fa-camera-retro fa-fixed-width"></i>&nbsp; Web Application 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="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="fa fa-hand-right fa-fixed-width"></i>&nbsp; Directional 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="fa fa-github fa-fixed-width"></i>&nbsp; Brand 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>
</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 %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-caret-down"></i>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>

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

@ -6,7 +6,7 @@
</p>
<div class="row">
<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>
Gittip is a great way to let developers know you appreciate their work.
</p>

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

@ -17,7 +17,7 @@
</div>
<div class="span4">
<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="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
</p>

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

@ -10,27 +10,27 @@
<div id="whats-new">
<div class="row">
<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>.
</div>
<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>.
</div>
<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.
</div>
<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.
</div>
<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.
</div>
<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
what's new and changed.
</div>

18
src/_includes/why.html
View File

@ -1,40 +1,40 @@
<div id="why">
<div class="row">
<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.
</div>
<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.
</div>
<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.
</div>
<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>.
</div>
<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.
</div>
<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.
</div>
<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>.
</div>
<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,
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</div>
<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.
</div>
</div>

24
src/_layouts/icon.html
View File

@ -6,19 +6,19 @@ relative_path: ../../
<div class="jumbotron jumbotron-icon">
<div class="container">
<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">
<i class="icon-{{ page.icon.id }} icon-5"></i>&nbsp;&nbsp;
<span class="hidden-tablet"><i class="icon-{{ page.icon.id }} icon-4"></i>&nbsp;&nbsp;</span>
<i class="icon-{{ page.icon.id }} icon-3"></i>&nbsp;&nbsp;
<i class="icon-{{ page.icon.id }} icon-2"></i>&nbsp;
<i class="fa fa-{{ page.icon.id }} fa-5"></i>&nbsp;&nbsp;
<span class="hidden-tablet"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span>
<i class="fa fa-{{ page.icon.id }} fa-3"></i>&nbsp;&nbsp;
<i class="fa fa-{{ page.icon.id }} fa-2"></i>&nbsp;
</span>
<i class="icon-{{ page.icon.id }} icon-1"></i>
<i class="fa fa-{{ page.icon.id }} fa-1"></i>
</div>
<h1 class="info-class">
icon-{{ page.icon.id }}
fa-{{ page.icon.id }}
<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;
Created: v{{ page.icon.created }} &middot;
Categories:
@ -29,7 +29,7 @@ relative_path: ../../
{% if icon_alias_count > 0 %}
&middot; Aliases:
{% for alias in page.icon.aliases %}
icon-{{ alias }}{% unless forloop.last %},{% endunless %}
fa-{{ alias }}{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endif %}
</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>
<div class="well well-transparent">
<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>
{% 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 %}
<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 class="span3">
<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 {
.{{ site.fontawesome.css_prefix }} {
// 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; }
}
}
.nav-tabs, .nav-pills {
.{{ site.fontawesome.css_prefix }} {
&, &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; }
&, &.{{ site.fontawesome.css_prefix }}-lg { line-height: .9em; }
}
}
.btn {
@ -35,7 +35,7 @@
&.pull-left, &.pull-right {
&.{{ 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 {

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 */
.{{ site.fontawesome.css_prefix }}-large:before {
.{{ site.fontawesome.css_prefix }}-lg:before {
font-size: (4em / 3);
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 }}-fixed-width {
display: inline-block;
width: (16em / 14);
padding-right: (4em / 14);
text-align: right;
&.{{ site.fontawesome.css_prefix }}-large {
&.{{ site.fontawesome.css_prefix }}-lg {
width: (20em / 14);
}
}

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

@ -1,3 +1,5 @@
---
---
// Mixins
// --------------------------
@ -24,15 +26,14 @@
}
.icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
.fa-stack {
.{{ site.fontawesome.css_prefix }}-stack {
position: relative;
display: inline-block;
width: @width;
height: @height;
line-height: @width;
vertical-align: -35%;
[class^="fa-"],
[class*=" fa-"] {
.{{ site.fontawesome.css_prefix }} {
position: absolute;
display: block;
width: 100%;
@ -42,7 +43,7 @@
*line-height: @height;
text-align: center;
}
.fa-stack-base {
.{{ site.fontawesome.css_prefix }}-stack-base {
font-size: @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 {
.icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 0; }
.icon-6 { font-size: 16em; }
.fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 0; }
.fa-6 { font-size: 16em; }
h1 small {
display: block;
margin-top: 15px;

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

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

2
src/community.html
View File

@ -4,7 +4,7 @@ title: The Font Awesome Community
navbar_active: community
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 %}
{% include jumbotron.html %}

2
src/examples.html
View File

@ -4,7 +4,7 @@ title: Font Awesome Examples
navbar_active: examples
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 %}
{% include jumbotron.html %}

2
src/get-started.html
View File

@ -4,7 +4,7 @@ title: Get Started with Font Awesome
navbar_active: get-started
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 %}
{% include jumbotron.html %}

2
src/icons.html
View File

@ -4,7 +4,7 @@ title: Font Awesome Icons
navbar_active: icons
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 %}
{% include jumbotron.html %}

2
src/license.html
View File

@ -4,7 +4,7 @@ title: Font Awesome License
navbar_active: license
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 %}
{% include jumbotron.html %}

2
src/whats-new.html
View File

@ -4,7 +4,7 @@ title: What's New
navbar_active: whats-new
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 %}
{% include jumbotron.html %}