First commit

This commit is contained in:
Pierre
2017-01-04 19:14:27 +01:00
parent 665fbbbb6a
commit d8e5c85b58
3051 changed files with 441706 additions and 0 deletions

View File

@ -0,0 +1 @@
<script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>

View File

@ -0,0 +1,5 @@
<h4><i class="fa fa-warning"></i> Warning!</h4>
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
Media Buttons" setting. We will not use hacks to force them to display. Please
<a href="https://adblockplus.org/en/bugs" class="alert-link">report an issue with Adblock Plus</a> if you believe this to be
an error. To work around this, you'll need to modify the social icon class names.

View File

@ -0,0 +1,5 @@
<ul class="margin-bottom-none padding-left-lg">
<li>All brand icons are trademarks of their respective owners.</li>
<li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li>
<li>Brand icons should only be used to represent the company or product to which they refer.</li>
</ul>

View File

@ -0,0 +1,6 @@
display: inline-block;
font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

View File

@ -0,0 +1,6 @@
display: inline-block;
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

View File

@ -0,0 +1,4 @@
/*!
* Font Awesome {{ site.fontawesome.version }} by @{{ site.fontawesome.author.twitter }} - {{ site.fontawesome.url }} - @{{ site.fontawesome.twitter }}
* License - {{ site.fontawesome.url }}/license (Font: {{ site.fontawesome.license.font.version }}, CSS: {{ site.fontawesome.license.code.version }})
*/

View File

@ -0,0 +1,22 @@
<div id="getting-support">
<h2 class="page-header">Getting Support</h2>
<p>
Having trouble getting Font Awesome up and running? Something not working the way you think it should? I hate that
I don't have time to answer Font Awesome support emails anymore. So here are some things you might wanna do:
</p>
<ol>
<li>
Make sure you've read the latest version of how to <a href="{{ page.relative_path }}get-started/">get started</a>.
It's been updated recently to make Font Awesome even easier to use.
</li>
<li>
Check out the <a href="http://stackoverflow.com/questions/tagged/font-awesome">existing questions tagged as
Font Awesome</a> over on Stack Overflow. Other folks might have had the same question you've had.
</li>
<li>
Can't find the answer to your question on Stack Overflow?
<a href="http://stackoverflow.com/questions/ask?tags=font-awesome">Ask a new question</a>, then
<a href="mailto:{{ site.fontawesome.author.email }}">send me an email</a> and I might be able to take a look.
</li>
</ol>
</div>

View File

@ -0,0 +1,7 @@
<section id="project-milestones">
<h2 class="page-header">Project Milestones</h2>
<p>
Want to keep up with what's planned for Font Awesome? Check out our
<a href="{{ site.fontawesome.github.url }}/milestones">milestones</a> on the GitHub project.
</p>
</section>

View File

@ -0,0 +1,18 @@
<section id="reporting-bugs">
<h2 class="page-header">Reporting Bugs</h2>
<p>
Found a problem with Font Awesome? Feel free to submit an issue on the GitHub project. But please keep the following in mind:
</p>
<ol>
<li>Please be nice. Font Awesome is a happy place.</li>
<li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your bug was already reported.</li>
<li>
Before opening any issue, please read the generic <a href="https://github.com/necolas/issue-guidelines">issue
guidelines</a>, by <a href="https://github.com/necolas/">Nicolas Gallagher</a>.
</li>
<li>
After doing everything above, feel free to
<a href="{{ site.fontawesome.github.url }}/issues/new">submit an issue</a>.
</li>
</ol>
</section>

View File

@ -0,0 +1,29 @@
<section id="requesting-new-icons">
<h2 class="page-header">Requesting New Icons</h2>
<p>
New icons mostly start as requests by the
<a href="{{ site.fontawesome.github.url }}/issues">Font Awesome community on GitHub</a>. Want to request a new
icon? Here are some things to keep in mind:
</p>
<ol>
<li>Please be nice. Font Awesome is a happy place.</li>
<li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your icon request already exists. If a request is found, please +1 that one.</li>
<li>
Please make requests for single icons, unless you are requesting a couple of strictly related icons (e.g., thumbs-up/thumbs-down).
</li>
<li>
Please and thank you if you include the following:
<ul>
<li>
Title your <a href="{{ site.fontawesome.github.url }}/issues/new?title=Icon%20Request:%20fa-">new issue</a>
<code>Icon request: icon-name</code> (e.g., <code>Icon request: icon-car</code>).
</li>
<li>Include a few use cases for your requested icon. How do you plan on using it?</li>
<li>Attach a single color image or two that represent the idea you're going for.</li>
</ul>
</li>
<li>
Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face. <i class="fa fa-smile-o"></i>
</li>
</ol>
</section>

View File

@ -0,0 +1,13 @@
<section id="submitting-pull-requests">
<h2 class="page-header">Submitting Pull Requests</h2>
Found a way to solve a bug in Font Awesome? Want to contribute new features? Here are a few things to remember:
<ol>
<li>Please do not submit new icons.</li>
<li>Please submit all pull requests against *-wip branches.</li>
<li>All pull requests submitted against master will be sumarily closed and this guide referenced.</li>
<li>
After doing everything above, feel free to
<a href="{{ site.fontawesome.github.url }}/issues/new">submit a pull request</a>.
</li>
</ol>
</section>

View File

@ -0,0 +1,42 @@
<section id="animated">
<h2 class="page-header">
Animated Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/animated.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_animated.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
</p>
</div>
<div class="col-md-9 col-sm-8">
<p>
Use the <code>fa-spin</code> class to get any icon to rotate, and use <code>fa-pulse</code> to have it rotate
with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
</p>
{% highlight html %}
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
{% endhighlight %}
<p class="alert alert-success">
<i class="fa fa-exclamation-triangle fa-lg"></i>
Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See
<a href="https://github.com/FortAwesome/Font-Awesome/issues/671" class="alert-link" target="_blank">issue #671</a>
for examples and possible workarounds.
</p>
<p class="alert alert-success">
<i class="fa fa-info-circle fa-lg"></i> CSS3 animations aren't supported in IE8 - IE9.
</p>
</div>
</div>
</section>

View File

@ -0,0 +1,36 @@
<section id="basic">
<h2 class="page-header">
Basic Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/core.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_core.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</p>
</div>
<div class="col-md-9 col-sm-8">
<p>
You can place Font Awesome icons just about anywhere using the CSS Prefix <code>fa</code> and the icon's
name. Font Awesome is designed to be used with inline elements (we like the <code>&lt;i&gt;</code> tag for
brevity, but using a <code>&lt;span&gt;</code> is more semantically correct).
</p>
{% highlight html %}
<i class="fa fa-camera-retro"></i> fa-camera-retro
{% endhighlight %}
<div class="alert alert-success">
<ul class="fa-ul">
<li>
<i class="fa fa-info-circle fa-lg fa-li"></i>
If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color,
drop shadow, and anything else that gets inherited using CSS.
</li>
</ul>
</div>
</div>
</div>
</section>

View File

@ -0,0 +1,93 @@
<section id="bootstrap">
<h2 class="page-header">Bootstrap 3 Examples</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
</p>
<p>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
</p>
<div class="margin-bottom">
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>
</div>
<div class="margin-bottom">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
</div>
<div class="margin-bottom">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-9 col-sm-8">
<p>
Font Awesome works great with the full range of Bootstrap components.
</p>
{% highlight html %}
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
{% endhighlight %}
</div>
</div>
</section>

View File

@ -0,0 +1,30 @@
<section id="bordered-pulled">
<h2 class="page-header">
Bordered & Pulled Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
&hellip;tomorrow we will run faster, stretch out our arms farther&hellip; And then one fine morning—
So we beat on, boats against the current, borne back ceaselessly into the past.
</p>
</div>
<div class="col-md-9 col-sm-8">
<p>
Use <code>fa-border</code> and <code>fa-pull-right</code> or <code>fa-pull-left</code> for easy pull quotes or
article icons.
</p>
{% highlight html %}
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
{% endhighlight %}
</div>
</div>
</section>

View File

@ -0,0 +1,16 @@
<section id="custom">
<h2 class="page-header">Custom CSS</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
</div>
<div class="col-md-9 col-sm-8">
<p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p>
<div class="well">
<span class="rating">
<span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
</span>
</div>
</div>
</div>
</section>

View File

@ -0,0 +1,33 @@
<section id="fixed-width">
<h2 class="page-header">
Fixed Width Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/fixed-width.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_fixed-width.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>
</div>
<div class="col-md-9 col-sm-8">
<p>
Use <code>fa-fw</code> to set icons at a fixed width. Great to use when different icon widths throw off alignment.
Especially useful in things like nav lists &amp; list groups.
</p>
{% highlight html %}
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>
{% endhighlight %}
</div>
</div>
</section>

View File

@ -0,0 +1,40 @@
<section id="larger">
<h2 class="page-header">
Larger Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/larger.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_larger.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-2x</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-3x</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-4x</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-5x</p>
</div>
<div class="col-md-9 col-sm-8">
<p>
To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
<code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.
</p>
{% highlight html %}
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
{% endhighlight %}
<div class="alert alert-success">
<ul class="fa-ul">
<li>
<i class="fa fa-exclamation-triangle fa-li fa-lg"></i>
If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height.
</li>
</ul>
</div>
</div>
</div>
</section>

View File

@ -0,0 +1,30 @@
<section id="list">
<h2 class="page-header">
List Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/list.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_list.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
</div>
<div class="col-md-9 col-sm-8">
<p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
{% highlight html %}
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
{% endhighlight %}
</div>
</div>
</section>

View File

@ -0,0 +1,34 @@
<section id="rotated-flipped">
<h2 class="page-header">
Rotated &amp; Flipped
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/rotated-flipped.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_rotated-flipped.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p style="font-size: 18px;">
<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
</p>
</div>
<div class="col-md-9 col-sm-8">
<p>
To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes.
</p>
{% highlight html %}
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
{% endhighlight %}
</div>
</div>
</section>

View File

@ -0,0 +1,65 @@
<section id="stacked">
<h2 class="page-header">
Stacked Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/stacked.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_stacked.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="margin-bottom">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
</div>
</div>
<div class="col-md-9 col-sm-8">
<p>
To stack multiple icons, use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
for the regularly sized icon, and <code>fa-stack-2x</code> for the larger icon. <code>fa-inverse</code>
can be used as an alternative icon color. You can even throw <a href="#larger">larger icon</a> classes on the parent
to get further control of sizing.
</p>
{% highlight html %}
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
{% endhighlight %}
</div>
</div>
</section>

View File

@ -0,0 +1,34 @@
<footer id="footer" class="footer hidden-print">
<div class="container text-center">
<div id="bsap_1298241" class="bsarocks bsap_b1146e3f9fa32a794fc6d2c7be47ece8">
<a href="http://www.wpbeginner.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome" title="Beginner's Guide to WordPress" target="_blank" rel="nofollow"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'wpbeginner.com']);">
<img src="{{ page.relative_path }}assets/img/logo-wpbeginner.png" width="220" height="65" alt="">
</a>
<a href="https://themeisle.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome" title="Beginner's Guide to WordPress" target="_blank" rel="nofollow"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'themeisle.com']);">
<img src="{{ page.relative_path }}assets/img/logo-themeisle.png" width="220" height="65" alt="">
</a>
</div>
<div>
<i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
<span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
Created by <a href="https://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div>
<div>
Font Awesome licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
<span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a>
<span class="hide-xs hide-sm">&middot;</span><br class="hide-md hide-lg">
Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
</div>
<div>
Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378/"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a>
</div>
<div class="project">
<a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;
<a href="{{ site.fontawesome.github.url }}/issues">Issues</a> &middot;
<a href="{{ page.relative_path }}3.2.1">Old 3.2.1 Docs</a>
</div>
</div>
</footer>

View File

@ -0,0 +1,19 @@
<section id="brand">
<h2 class="page-header">Brand Icons</h2>
<div class="alert alert-warning">
{% include brand-adblock-warning.html %}
</div>
<div class="row fontawesome-icon-list margin-bottom-lg">
{% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
{% for icon in icons_brand %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
<div class="alert alert-success">
{% include brand-license.html %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="chart">
<h2 class="page-header">Chart Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_chart = icons | expand_aliases | category:"Chart Icons" | sort_by:'class' %}
{% for icon in icons_chart %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="currency">
<h2 class="page-header">Currency Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
{% for icon in icons_currency %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="directional">
<h2 class="page-header">Directional Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
{% for icon in icons_directional %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="file-type">
<h2 class="page-header">File Type Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_file_type = icons | expand_aliases | category:"File Type Icons" | sort_by:'class' %}
{% for icon in icons_file_type %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,11 @@
<section id="form-control">
<h2 class="page-header">Form Control Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_form_control = icons | expand_aliases | category:"Form Control Icons" | sort_by:'class' %}
{% for icon in icons_form_control %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="gender">
<h2 class="page-header">Gender Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_gender = icons | expand_aliases | category:"Gender Icons" | sort_by:'class' %}
{% for icon in icons_gender %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="hand">
<h2 class="page-header">Hand Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_hand = icons | expand_aliases | category:"Hand Icons" | sort_by:'class' %}
{% for icon in icons_hand %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="medical">
<h2 class="page-header">Medical Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
{% for icon in icons_medical %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,18 @@
<section id="new">
<h2 class="page-header">{{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h2>
{% if page.navbar_active != "icons" %}
<div class="margin-botom-large">
You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
Want to request new icons? <a href="{{ page.relative_path }}community/#requesting-new-icons">Here's how</a>.
</div>
{% endif %}
<div class="row fontawesome-icon-list">
{% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version | sort_by:'class' %}
{% for icon in icons_new %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="payment">
<h2 class="page-header">Payment Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_payment = icons | expand_aliases | category:"Payment Icons" | sort_by:'class' %}
{% for icon in icons_payment %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,21 @@
<section id="spinner">
<h2 class="page-header">Spinner Icons</h2>
<div class="alert alert-success">
<ul class="fa-ul">
<li>
<i class="fa fa-info-circle fa-lg fa-li"></i>
These icons work great with the <code>fa-spin</code> class. Check out the
<a href="{{ page.relative_path }}examples/#animated" class="alert-link">spinning icons example</a>.
</li>
</ul>
</div>
<div class="row fontawesome-icon-list">
{% assign icons_spinner = icons | expand_aliases | category:"Spinner Icons" | sort_by:'class' %}
{% for icon in icons_spinner %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="text-editor">
<h2 class="page-header">Text Editor Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
{% for icon in icons_text_editor %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="transportation">
<h2 class="page-header">Transportation Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_transportation = icons | expand_aliases | category:"Transportation Icons" | sort_by:'class' %}
{% for icon in icons_transportation %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="video-player">
<h2 class="page-header">Video Player Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
{% for icon in icons_video_player %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,12 @@
<section id="web-application">
<h2 class="page-header">Web Application Icons</h2>
<div class="row fontawesome-icon-list">
{% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
{% for icon in icons_web_application %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

View File

@ -0,0 +1,53 @@
<div class="jumbotron jumbotron-carousel hidden-print">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 text-center">
<h1>Font Awesome</h1>
<p>The iconic font and CSS toolkit</p>
<div class="actions">
<a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal"
onClick="_gaq.push(['_trackEvent', 'Launch Modal', 'Launch Download Modal']);">
<i class="fa fa-download fa-lg"></i>&nbsp;
Download
</a>
</div>
<div class="shameless-self-promotion">
Version {{ site.fontawesome.version }} &nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="{{ site.fontawesome.github.url }}"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="{{ page.relative_path }}3.2.1">Old 3.2.1 Docs</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
Created by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div id="icon-carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><div><i class="fa fa-flag"></i></div></div>
<div class="item"><div><i class="fa fa-fort-awesome"></i></div></div>
<div class="item"><div><i class="fa fa-sticky-note"></i></div></div>
<div class="item"><div><i class="fa fa-commenting"></i></div></div>
<div class="item"><div><i class="fa fa-map-signs"></i></div></div>
<div class="item"><div><i class="fa fa-envelope"></i></div></div>
<div class="item"><div><i class="fa fa-send-o"></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-o"></i></div></div>
<div class="item"><div><i class="fa fa-thumbs-o-up"></i></div></div>
<div class="item"><div><i class="fa fa-pied-piper-alt"></i></div></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#icon-carousel" data-slide="prev"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
<i class="fa fa-arrow-circle-left"></i></a>
<a class="carousel-control right" href="#icon-carousel" data-slide="next"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
<i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,6 @@
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<h1>{{ jumbotron_h1 }}</h1>
<p>{{ jumbotron_p }}</p>
</div>
</div>

View File

@ -0,0 +1,34 @@
<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
<h2 class="modal-title" id="modal-download-label">Help Us Out!</h2>
</div>
<div class="modal-body text-lg">
<p class="margin-bottom-lg">
I hope you love Font Awesome. If you've found it useful,
<a class="strong" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.4_update" target="_blank">
please do me a favor and check out my latest project, Fonticons</a>. It makes it easy to put the perfect
icons on your website. Choose from our awesome, comprehensive icon sets or copy and paste your own.
</p>
<p class="margin-bottom-lg">
Please. Check it out.
</p>
<p>&mdash;Dave Gandy</p>
</div>
<div class="modal-footer">
<a class="btn btn-default btn-lg block-xs" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
<i class="fa fa-download fa-lg"></i>&nbsp;
Download
</a>
<a class="btn btn-success btn-lg block-xs" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.4_update" target="_blank">
Check out Fonticons &nbsp;<i class="fa fa-external-link fa-lg"></i>
</a>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,89 @@
<div class="collapse hidden-print" id="banner">
<div class="container">
<div class="message-container">
<div class="tagline">
<span id="rotating-message"></span>
</div>
<div class="action">
<a id="rotating-url" class="btn btn-primary btn-block" href=""></a>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top hidden-print">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i>
</button>
<a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-logo"></i></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
<li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">What's New</a>
</li>
<li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">New</a>
</li>
<li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</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-xs{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li>
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw"></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-xs{% if page.navbar_active == "examples" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="divider"></li>
<li><a href="{{ page.relative_path }}examples/#basic">Basic Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger">Larger Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#fixed-width">Fixed Width Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#animated">Animated Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3 Examples</a></li>
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul>
</li>
<li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
</ul>
</div>
</div>
</div>

View File

@ -0,0 +1,29 @@
<section id="whats-new" class="feature-list">
<div class="row">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-file-text-o"></i> Completely Rewritten</h4>
Everything re-written from the ground up for speed and simplicity.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-fighter-jet"></i> CSS Best Practices</h4>
New icon base class allows simpler CSS, faster rendering, and easier control.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-terminal"></i> New Icon Names</h4>
Icons have been renamed to improve consistency and predictability.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-thumbs-o-up"></i> Bootstrap 3</h4>
Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-code"></i> Better Compatibility</h4>
Font Awesome is now more compatible with all web frameworks, including Foundation.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-rub"></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>
</section>

View File

@ -0,0 +1,157 @@
<section id="new-naming">
<h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
<p class="lead text-center alert alert-success">fa-[name]-[shape]-[o]-[direction]</p>
<p>
A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict
the names of variants.
</p>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">fa-*</h4>
<p class="margin-bottom-sm">Solid icons as the base variant</p>
<ul class="fa-ul padding-left-sm">
<li>
<i class="fa fa-bookmark fa-li"></i>
fa-bookmark
</li>
<li>
<i class="fa fa-comment fa-li"></i>
fa-comment
</li>
<li>
<i class="fa fa-folder fa-li"></i>
fa-folder
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-o</h4>
<p class="margin-bottom-sm">Outlined version of previous modifier</p>
<ul class="fa-ul padding-left-sm">
<li>
<i class="fa fa-bookmark-o fa-li"></i>
fa-bookmark-o
</li>
<li>
<i class="fa fa-comment-o fa-li"></i>
fa-comment-o
</li>
<li>
<i class="fa fa-folder-o fa-li"></i>
fa-folder-o
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-circle</h4>
<p class="margin-bottom-sm">Circle under previous modifier</p>
<ul class="fa-ul padding-left-sm">
<li>
<i class="fa fa-check-circle fa-li"></i>
fa-check-circle
</li>
<li>
<i class="fa fa-exclamation-circle fa-li"></i>
fa-exclamation-circle
</li>
<li>
<i class="fa fa-plus-circle fa-li"></i>
fa-plus-circle
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-square</h4>
<p class="margin-bottom-sm">Square under previous modifier</p>
<ul class="fa-ul padding-left-sm">
<li>
<i class="fa fa-check-square fa-li"></i>
fa-check-square
</li>
<li>
<i class="fa fa-twitter-square fa-li"></i>
fa-twitter-square
</li>
<li>
<i class="fa fa-plus-square fa-li"></i>
fa-plus-square
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-right, *-up, etc.</h4>
<p class="margin-bottom-sm">Directional modifier always at the end</p>
<ul class="fa-ul padding-left-sm">
<li>
<i class="fa fa-arrow-right fa-li"></i>
fa-arrow-right
</li>
<li>
<i class="fa fa-arrow-circle-right fa-li"></i>
fa-arrow-circle-right
</li>
<li>
<i class="fa fa-angle-double-right fa-li"></i>
fa-angle-double-right
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-alt</h4>
<p class="margin-bottom-sm">Alternative to the original</p>
<ul class="fa-ul padding-left-sm">
<li>
<i class="fa fa-unlock-alt fa-li"></i>
fa-unlock-alt
</li>
<li>
<i class="fa fa-list-alt fa-li"></i>
fa-list-alt
</li>
<li>
<i class="fa fa-github-alt fa-li"></i>
fa-github-alt
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-h, *-v</h4>
<p class="margin-bottom-sm">Horizontal &amp; vertical modifiers</p>
<ul class="fa-ul padding-left-sm">
<li>
<i class="fa fa-arrows-v fa-li"></i>
fa-arrows-v
</li>
<li>
<i class="fa fa-arrows-h fa-li"></i>
fa-arrows-h
</li>
<li>
<i class="fa fa-ellipsis-v fa-li"></i>
fa-ellipsis-v
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">Combine 'em up...</h4>
<p class="margin-bottom-sm">Consistent when strung together</p>
<ul class="fa-ul padding-left-sm">
<li>
<i class="fa fa-arrow-circle-o-right fa-li"></i>
fa-arrow-circle-o-right
</li>
<li>
<i class="fa fa-caret-square-o-right fa-li"></i>
fa-caret-square-o-right
</li>
<li>
<i class="fa fa-hand-o-right fa-li"></i>
fa-hand-o-right
</li>
</ul>
</div>
</div>
</section>

View File

@ -0,0 +1,10 @@
<section id="new-upgrading">
<h2 class="page-header">Upgrading from 3.2.1?</h2>
<p>
For complete documentation of the syntax changes in {{ site.fontawesome.minor_version }}, check out the
<a href="{{ page.relative_path }}examples">examples</a>. For the changes to icon names,
<a href="https://twitter.com/gtagliala">@gtagliala</a> has put together a
<a href="{{ site.fontawesome.github.url }}/wiki/Upgrading-from-3.2.1-to-4">great wiki page</a> that
documents all the changes.
</p>
</section>

View File

@ -0,0 +1,6 @@
<section class="hidden-print">
<div class="stripe-ad">
{% include ads/fusion.html %}
{{ stripe_ad_content }}
</div>
</section>

View File

@ -0,0 +1,35 @@
<div id="social-buttons" class="hidden-print">
<div class="container">
<form id="newsletter" method="post" action="https://formkeep.com/f/ba101f5b69f0">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm-6">
<div class="form-group margin-bottom">
<input name="email" type="email" class="form-control" id="email" placeholder="Enter your email address&hellip;" required>
</div>
</div>
<div class="col-md-4 col-sm-6">
<button type="submit" class="btn btn-success btn-block margin-bottom-lg"
data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope"></i>
</button>
</div>
</div>
</form>
<ul class="list-inline">
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/{{ site.fontawesome.twitter }}" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @{{ site.fontawesome.twitter }}</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.fontawesome.url }}" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="{{ site.fontawesome.legacy_url }}" data-count="horizontal" data-via="{{ site.fontawesome.twitter }}" data-related="{{ site.fontawesome.author.twitter }}:Creator of Font Awesome">Tweet</a>
</li>
</ul>
</div>
</div>

View File

@ -0,0 +1,22 @@
<section id="tell-me-thanks">
<h2 class="page-header">Tell Me Thanks</h2>
<p class="lead">
Hopefully you think Font Awesome <em>is</em> awesome. I've put hundreds of hours into the project to give back to the
open source community. If you'd like, here are a couple of ways you can tell me thanks for all my hard work.
</p>
<div class="row">
<div class="col-md-6 col-sm-6">
<h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip padding-right-sm"></i>Tip me on Gittip</a></h3>
<p>
Gittip is a great way to let developers know you appreciate their work.
</p>
</div>
<div class="col-md-6 col-sm-6">
<h3><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List</a></h3>
<p>
Or pick something straight
from <a href="http://amzn.com/w/G64X58AY416W" target="_blank">my wish list</a>. Gift cards are great.
</p>
</div>
</div>
</section>

View File

@ -0,0 +1,6 @@
<a href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br>
<a href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br>
<a href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br>
<a href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br>
<a href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br>
<a href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a>

View File

@ -0,0 +1,6 @@
<a class="btn btn-default" href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a>

View File

@ -0,0 +1,6 @@
<i class="fa fa-flag"></i>&nbsp; normal<br>
<i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical

View File

@ -0,0 +1,69 @@
<p>
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
GitHub Icon
</a>
</p>
<p>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
GitHub Icon
</a>
</p>
<p>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
GitHub Icon
</a>
</p>

View File

@ -0,0 +1,4 @@
<span class="fa-stack">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<span class="fa-stack-1x padding-top-sm">27</span>
</span>

View File

@ -0,0 +1,58 @@
<span style="border: solid 1px #d3d3d3; display: inline-block; text-align: center">
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span><br>Center
</span>
<hr>
<p>
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
GitHub Icon
</p>
<p>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
GitHub Icon
</p>
<p>
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
Twitter Icon
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i>
</span>
Facebook Icon
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
GitHub Icon
</p>

View File

@ -0,0 +1,26 @@
<section id="thanks-to">
<h2 class="page-header">Thanks To</h2>
<div class="row">
<div class="col-md-4 col-sm-4">
<p>
Thanks to <a href="https://twitter.com/robmadole/">@robmadole</a> and
<a href="https://twitter.com/supercodepoet/">@supercodepoet</a> for icon design
review, advice, some Jekyll help, and being all around badass coders.
</p>
</div>
<div class="col-md-4 col-sm-4">
<p>
HUGE thanks to <a href="https://twitter.com/gtagliala">@gtagliala</a> for doing such a fantastic job managing
pull requests and issues on the Font Awesome
<a href="{{ site.fontawesome.github.url }}">GitHub project</a>.
</p>
</div>
<div class="col-md-4 col-sm-4">
<p>
Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn">&nbsp;</i>MaxCDN</a> for providing the excellent
<a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN</a>, the fastest and easiest way to
<a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
</p>
</div>
</div>
</section>

View File

@ -0,0 +1,41 @@
<section id="why" class="feature-list">
<div class="row">
<div class="col-md-4 col-sm-6">
<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="col-md-4 col-sm-6">
<h4><i class="fa fa-ban"></i> No JavaScript Required</h4>
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-arrows-alt"></i> Infinite Scalability</h4>
Scalable vector graphics means every icon looks awesome at any size.
</div>
<div class="col-md-4 col-sm-6">
<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="col-md-4 col-sm-6">
<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="col-md-4 col-sm-6">
<h4><i class="fa fa-eye"></i> Perfect on Retina Displays</h4>
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-gamepad"></i> Plays Well with Others</h4>
Originally designed for <a href="{{ site.bootstrap.url }}">Bootstrap</a>, Font Awesome works great with all frameworks.
</div>
<div class="col-md-4 col-sm-6">
<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="col-md-4 col-sm-6">
<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>
</section>