Commit 8b5f31b8 authored by Huang's avatar Huang
Browse files

no commit message

parent d8b3ed74
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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> icon-flip-vertical
{% endhighlight %}
</div>
</div>
</section>
<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>
<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>
<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>
<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>
<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>
<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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment