add font_awesome

This commit is contained in:
friendica
2013-10-08 16:11:20 -07:00
parent e9c535f40a
commit 043042428c
197 changed files with 26559 additions and 1 deletions

View File

@@ -0,0 +1 @@
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_VERTDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>

View File

@@ -0,0 +1 @@
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>

View File

@@ -0,0 +1 @@
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>

View File

@@ -0,0 +1,4 @@
<ul class="margin-bottom-none">
<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>
</ul>

View File

@@ -0,0 +1,19 @@
{% capture stripe_ad_content %}
<p class="lead">
Print this page to PDF for the complete set of vectors. Or to use on the desktop, install FontAwesome.otf and copy
and paste the icons (not the unicode) directly into your designs.
</p>
{% endcapture %}
{% include stripe-ad.html %}
<h2 class="page-header">Every Font Awesome {{ site.fontawesome.version }} Icon, CSS Class, &amp; Unicode</h2>
<div class="row">
{% for icon in icons %}
<div class="span4">
<i class="icon-fixed-width">&#x{{ icon.unicode }}</i>
icon-{{ icon.id }}
<span class="muted">(&amp;#x{{ icon.unicode }};)</span>
</div>
{% endfor %}
</div>

View File

@@ -0,0 +1,20 @@
{% capture stripe_ad_content %}
<p class="lead">
Font Awesome has a vibrant community of folks helping each other out. You can
<a href="#getting-support">get support</a>,
<a href="#reporting-bugs">report bugs</a>,
<a href="#requesting-new-icons">request new icons</a>,
<a href="#submitting-pull-requests">submit pull requests</a>, and
<a href="#project-milestones">check upcoming milestones</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include community/getting-support.html %}
{% include community/reporting-bugs.html %}
{% include community/requesting-new-icons.html %}
{% include community/submitting-pull-requests.html %}
{% include community/project-milestones.html %}
{% include thanks-to.html %}
{% include tell-me-thanks.html %}

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 }}/issues/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 icon request already exists.</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,27 @@
<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.</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:%20icon-name">new issue</a>
<code>Icon request: icon-name</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>
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>
</li>
</ol>
</section>

View File

@@ -0,0 +1,12 @@
<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 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,24 @@
{% capture stripe_ad_content %}
<p class="lead">
After you <a href="{{ page.relative_path }}get-started/">get up and running</a>, you can place Font Awesome icons just about
anywhere with the <code>&lt;i&gt;</code> tag.
Many examples appreciatively re-used from the <a href="{{ site.bootstrap.url }}">Bootstrap documentation</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include examples/new.html %}
{% include examples/inline-icons.html %}
{% include examples/larger-icons.html %}
{% include examples/bordered-pulled.html %}
{% include examples/buttons.html %}
{% include examples/button-groups.html %}
{% include examples/button-dropdowns.html %}
{% include examples/bulleted-lists.html %}
{% include examples/navigation.html %}
{% include examples/form-inputs.html %}
{% include examples/animated-spinner.html %}
{% include examples/rotated-flipped.html %}
{% include examples/stacked.html %}
{% include examples/custom.html %}

View File

@@ -0,0 +1,20 @@
<section id="animated-spinner">
<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>.
</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...
</div>
{% highlight html %}
<i class="icon-spinner icon-spin icon-large"></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.
</p>
</div>
</div>
</section>

View File

@@ -0,0 +1,33 @@
<section id="bordered-pulled">
<h2 class="page-header">Bordered & Pulled Icons</h2>
<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
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>
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>
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>
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>
Use a few of the new styles together ... lots of new possibilities.
{% endhighlight %}
</div>
</div>
</section>

View File

@@ -0,0 +1,31 @@
<section id="bulleted-lists">
<h2 class="page-header">Bulleted Lists</h2>
<div class="row">
<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>
</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>
{% 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>
</div>
</section>

View File

@@ -0,0 +1,36 @@
<section id="button-dropdowns">
<h2 class="page-header">Button Dropdowns</h2>
<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 dropdown-toggle" data-toggle="dropdown" href="#">
<span class="icon-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 class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
</div>
<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 dropdown-toggle" data-toggle="dropdown" href="#">
<span class="icon-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 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>
</div>
</section>

View File

@@ -0,0 +1,25 @@
<section id="button-groups">
<h2 class="page-header">Button Groups</h2>
<div class="row">
<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>
</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>
</div>
{% endhighlight %}
</div>
</div>
</section>

View File

@@ -0,0 +1,57 @@
<section id="buttons">
<h2 class="page-header">Buttons</h2>
<div class="row">
<div class="span3">
<p>
<a class="btn" href="#">
<i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#">
<i class="icon-shopping-cart icon-large"></i> Checkout</a>
</p>
<p>
<a class="btn btn-large btn-primary" href="#">
<i class="icon-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#">
<i class="icon-info-sign"></i> Info</a>
</p>
<p>
<a class="btn btn-danger" href="#">
<i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#">
<i class="icon-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>
</p>
<p>
<a class="btn btn-primary" href="#">
<i class="icon-refresh icon-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>.
</p>
{% highlight html %}
<a class="btn" href="#">
<i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#">
<i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#">
<i class="icon-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#">
<i class="icon-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#">
<i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#">
<i class="icon-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>
<a class="btn btn-primary" href="#">
<i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
{% 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="span3">
<p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
</div>
<div class="span9">
<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,31 @@
<section id="form-inputs">
<h2 class="page-header">Prepended & Appended Form Inputs</h2>
<div class="row">
<div class="span3">
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-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>
<input class="span2" type="password" placeholder="Password">
</div>
</form>
</div>
<div class="span9">
{% highlight html %}
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-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>
<input class="span2" type="password" placeholder="Password">
</div>
</form>
{% endhighlight %}
</div>
</div>
</section>

View File

@@ -0,0 +1,19 @@
<section id="inline-icons">
<h2 class="page-header">Inline Icons</h2>
<div class="row">
<div class="span3">
<p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
</div>
<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
</div>
</div>
{% highlight html %}
<i class="icon-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>
</div>
</section>

View File

@@ -0,0 +1,35 @@
<section id="larger-icons">
<h2 class="page-header">Larger Icons</h2>
<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>.
</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.
</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>
</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>
{% 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
sufficient line-height.
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,26 @@
<section id="navigation">
<h2 class="page-header">Navigation</h2>
<div class="row">
<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>
</ul>
</div>
</div>
<div class="span9">
<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>
</ul>
{% endhighlight %}
</div>
</div>
</section>

View File

@@ -0,0 +1,47 @@
<{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles">
<h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2>
<div class="row">
<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
</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>
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>
</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>
</span>
icon-terminal on icon-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>
</div>
</div>
</div>
</{% if page.navbar_active == "examples" %}div{% else %}section{% endif %}>

View File

@@ -0,0 +1,29 @@
<section id="rotated-flipped">
<h2 class="page-header">Rotated &amp; Flipped</h2>
<div class="row">
<div class="span3">
A set of classes that can be used to arbitrarily rotate and flip icons.
</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
</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
{% endhighlight %}
<p class="alert alert-info">
<i class="icon-info-sign"></i> Rotating and flipping icons aren't yet supported in IE7.
</p>
</div>
</div>
</section>

View File

@@ -0,0 +1,55 @@
<section id="stacked">
<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.
</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>
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>
</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>
</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>
</span>
icon-camera on icon-ban-circle
</div>
{% highlight html %}
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-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>
</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>
</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>
</span>
icon-camera on icon-ban-circle
{% endhighlight %}
</div>
</div>
</section>

View File

@@ -0,0 +1,23 @@
<footer class="footer hidden-print">
<div class="container text-center">
<div>
<i class="icon-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>
<div>
Font Awesome licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
<span class="hidden-phone">&middot;</span><br class="visible-phone">
Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a>
<span class="hidden-phone hidden-tablet">&middot;</span><br class="visible-phone visible-tablet">
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>
</div>
<div class="project">
<a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;
<a href="{{ site.fontawesome.github.url }}/issues">Issues</a>
</div>
</div>
</footer>

View File

@@ -0,0 +1,105 @@
{% capture stripe_ad_content %}
<p class="lead">
Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and
customize the LESS yourself! Font Awesome even plays nicely with
<a href="{{ site.bootstrap.url }}">Bootstrap</a>!
</p>
{% endcapture %}
{% include stripe-ad.html %}
<div id="bootstrapcdn">
<h2 class="page-header">EASIEST: <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a></h2>
<p>Add Font Awesome + Bootstrap into your website with two lines of code. You don't even have to download or install anything!</p>
<ol>
<li>
Paste the following code into the <code>&lt;head&gt;</code> section of your site's HTML.
{% highlight html %}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/{{ site.bootstrap.version }}/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<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.
</div>
</li>
<li>
Pat yourself on the back for your scalable-vector-icons-on-the-website
<a href="http://37signals.com/svn/posts/312-lingo-judo">judo solution</a> in two lines of code.
</li>
<li>
Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!
</li>
</ol>
</div>
<section id="default-css">
<h2 class="page-header">EASY: Default CSS</h2>
<p>Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.</p>
<ol>
<li>Copy the <code>font-awesome</code> directory into your project.</li>
<li>
In the <code>&lt;head&gt;</code> of your html, reference the location to your font-awesome.min.css.
{% highlight html %}
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
{% endhighlight %}
</li>
<li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>
</ol>
</section>
<section id="custom-less">
<h2 class="page-header">PRO: Custom LESS</h2>
<p>Use this method to customize Font Awesome and Bootstrap {{ site.bootstrap.version }} using LESS.</p>
<ol>
<li>Copy the <code>font-awesome</code> directory into your project.</li>
<li>Open your project's bootstrap/bootstrap.less and replace
{% highlight html %}
@import "sprites.less";
{% endhighlight %}
with
{% highlight html %}
@import "path/to/font-awesome/less/font-awesome.less";
{% endhighlight %}
</li>
<li>
Open your project's font-awesome/variables.less and edit the <code>@FontAwesomePath</code> variable to point to your font directory.
{% 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>
</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>
</ol>
</section>
<section id="not-using-bootstrap">
<h2 class="page-header">Not using Bootstrap?</h2>
<p>Font Awesome works just as well without Bootstrap.</p>
<ol>
<li>Copy the <code>font-awesome</code> directory into your project.</li>
<li>Follow the above directions and skip the Bootstrap parts.</li>
<li>Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples).</li>
<li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>
</ol>
</section>
<section class="need-ie7">
<h2 class="page-header">Need IE7 Support?</h2>
<p>Font Awesome supports IE7. If you need it, you have my condolences.</p>
<ol>
<li>Get Font Awesome working properly in a modern browser.</li>
<li>Copy font-awesome-ie7.min.css into your project.</li>
<li>
In the <code>&lt;head&gt;</code> of your html, reference the location to your font-awesome-ie7.min.css.
{% highlight html %}
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->
{% endhighlight %}
</li>
<li>Go complain to whoever decided your project needs IE7 support.</li>
</ol>
</section>

View File

@@ -0,0 +1,18 @@
{% capture stripe_ad_content %}
<p class="lead">
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>.
<!--The ever-expanding list of Font Awesome {{ site.fontawesome.version }} icons.-->
Need vectors or want to use on the desktop? Check the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
{% include icons/new.html %}
{% include icons/web-application.html %}
{% include icons/currency.html %}
{% include icons/text-editor.html %}
{% include icons/directional.html %}
{% include icons/video-player.html %}
{% include icons/brand.html %}
{% include icons/medical.html %}

View File

@@ -0,0 +1,15 @@
<section id="brand">
<h2 class="page-header">Brand Icons</h2>
<div class="alert alert-info">
{% include brand-license.html %}
</div>
<div class="row the-icons">
{% 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>
{% endfor %}
</div>
</section>

View File

@@ -0,0 +1,12 @@
<section id="currency">
<h2 class="page-header">Currency Icons</h2>
<div class="row the-icons">
{% 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>
{% endfor %}
</div>
</section>

View File

@@ -0,0 +1,12 @@
<section id="directional">
<h2 class="page-header">Directional Icons</h2>
<div class="row the-icons">
{% 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>
{% endfor %}
</div>
</section>

View File

@@ -0,0 +1,12 @@
<section id="medical">
<h2 class="page-header">Medical Icons</h2>
<div class="row the-icons">
{% 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>
{% endfor %}
</div>
</section>

View File

@@ -0,0 +1,18 @@
<{% if page.navbar_active == "icons" %}div{% else %}section{% endif %} id="new">
<h2 class="page-header">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 the-icons">
{% 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>
{% endfor %}
</div>
</{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>

View File

@@ -0,0 +1,12 @@
<section id="text-editor">
<h2 class="page-header">Text Editor Icons</h2>
<div class="row the-icons">
{% 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>
{% endfor %}
</div>
</section>

View File

@@ -0,0 +1,12 @@
<section id="video-player">
<h2 class="page-header">Video Player Icons</h2>
<div class="row the-icons">
{% 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>
{% endfor %}
</div>
</section>

View File

@@ -0,0 +1,12 @@
<section id="web-application">
<h2 class="page-header">Web Application Icons</h2>
<div class="row the-icons">
{% 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>
{% endfor %}
</div>
</section>

View File

@@ -0,0 +1,53 @@
<div class="jumbotron jumbotron-index hidden-print">
<div class="container">
<div class="row">
<div class="span8">
<div class="hero-content">
<h1>Font Awesome</h1>
<p>The iconic font designed for Bootstrap</p>
<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;
Download
</a>
</div>
<div class="shameless-self-promotion">
<a href="{{ site.fontawesome.github.url }}"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
Version {{ site.fontawesome.version }} &nbsp;&nbsp;&middot;&nbsp;&nbsp;
Created &amp; Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div>
</div>
</div>
<div class="span4">
<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>
<!-- 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>
<a class="carousel-control right" href="#iconCarousel" data-slide="next"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
<i class="icon-circle-arrow-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,25 @@
/*!
* Font Awesome {{ site.fontawesome.version }}
* the iconic font designed for Bootstrap
* ------------------------------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation can be
* found at {{ site.fontawesome.url }}. Stay up to date on Twitter at
* http://twitter.com/{{ site.fontawesome.twitter }}.
*
* License
* ------------------------------------------------------------------------------
* - The Font Awesome font is licensed under {{ site.fontawesome.license.font.version }} -
* {{ site.fontawesome.license.font.url }}
* - Font Awesome CSS, LESS, and SASS files are licensed under {{ site.fontawesome.license.code.version }} -
* {{ site.fontawesome.license.code.url }}
* - Font Awesome documentation licensed under {{ site.fontawesome.license.documentation.version }} -
* {{ site.fontawesome.license.documentation.url }}
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - {{ site.fontawesome.url }}"
*
* Author - Dave Gandy
* ------------------------------------------------------------------------------
* Email: {{ site.fontawesome.author.email }}
* Twitter: http://twitter.com/{{ site.fontawesome.author.twitter }}
* Work: {{ site.fontawesome.author.work.title }} @ {{ site.fontawesome.author.work.name }} - {{ site.fontawesome.author.work.url }}
*/

View File

@@ -0,0 +1,57 @@
{% capture stripe_ad_content %}
<p class="lead">
Font Awesome is fully open source and is GPL compatible. You can use it for commercial projects, open source
projects, or really just about whatever you want.
</p>
{% endcapture %}
{% include stripe-ad.html %}
<div>
<div class="alert alert-info">
<ul class="icons-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:
"Font Awesome by Dave Gandy - http://fontawesome.io".
</li>
</ul>
</div>
</div>
<section>
<h2 class="page-header">Font License</h2>
<ul>
<li>
Applies to all desktop and webfont files in the following directory:
<code>font-awesome/font/</code>.
</li>
<li>License: {{ site.fontawesome.license.font.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.url }}</a></li>
</ul>
</section>
<section>
<h2 class="page-header">Code License</h2>
<ul>
<li>
Applies to all CSS and LESS files in the following directories:
<code>font-awesome/css/</code> and
<code>font-awesome/less/</code>.
</li>
<li>License: {{ site.fontawesome.license.code.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.url }}</a></li>
</ul>
</section>
<section>
<h2 class="page-header">Documentation License</h2>
<ul>
<li>Applies to all Font Awesome project files that are not a part of the Font or Code licenses.</li>
<li>License: {{ site.fontawesome.license.documentation.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.url }}</a></li>
</ul>
</section>
<section>
<h2 class="page-header">Brand Icons</h2>
{% include brand-license.html %}
</section>

View File

@@ -0,0 +1,69 @@
<div class="navbar navbar-inverse navbar-static-top hidden-print">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="{{ page.relative_path }}"><i class="icon-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>
<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-phone{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-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 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>
</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>
</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/#new-styles">New Styles</a></li>
<li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
<li><a href="{{ page.relative_path }}examples/#buttons">Buttons</a></li>
<li><a href="{{ page.relative_path }}examples/#button-groups">Button Groups</a></li>
<li><a href="{{ page.relative_path }}examples/#button-dropdowns">Button Dropdowns</a></li>
<li><a href="{{ page.relative_path }}examples/#bulleted-lists">Bulleted Lists</a></li>
<li><a href="{{ page.relative_path }}examples/#navigation">Navigation</a></li>
<li><a href="{{ page.relative_path }}examples/#form-inputs">Form Inputs</a></li>
<li><a href="{{ page.relative_path }}examples/#animated-spinner">Animated Spinner</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul>
</li>
<li{% if page.navbar_active == "whats-new" %} class="active"{% endif %}><a href="{{ page.relative_path }}whats-new/">
<span class="hidden-tablet">What's </span>New</a>
</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 pull-right">
<li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
</ul>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,10 @@
<section class="hidden-print">
<div class="row stripe-ad">
<div class="span8">
{{ stripe_ad_content }}
</div>
<div class="span4">
{% include ads/carbon-light-horizontal.html %}
</div>
</div>
</section>

View File

@@ -0,0 +1,18 @@
<div id="social-buttons" class="hidden-print">
<div class="container">
<ul class="unstyled inline">
<li>
<iframe class="github-btn" src="http://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="http://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 designed for Bootstrap" 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="span6">
<h3><a href="https://www.gittip.com/davegandy/"><i class="icon-gittip"></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="span6">
<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="icon-flag"></i>&nbsp; normal</a><br>
<a href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br>
<a href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br>
<a href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br>
<a href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br>
<a href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>

View File

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

View File

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

View File

@@ -0,0 +1,69 @@
<p>
<a href="#">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-twitter icon-light"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-facebook icon-light"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-github icon-light"></i>
</span>
GitHub Icon
</a>
</p>
<p>
<a href="#">
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-twitter icon-light"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-facebook icon-light"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-github icon-light"></i>
</span>
GitHub Icon
</a>
</p>
<p>
<a href="#">
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-facebook"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-github"></i>
</span>
GitHub Icon
</a>
</p>

View File

@@ -0,0 +1,51 @@
<p>
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-twitter icon-light"></i>
</span>
Twitter Icon
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-facebook icon-light"></i>
</span>
Facebook Icon
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-github icon-light"></i>
</span>
GitHub Icon
</p>
<p>
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-twitter icon-light"></i>
</span>
Twitter Icon
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-facebook icon-light"></i>
</span>
Facebook Icon
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-github icon-light"></i>
</span>
GitHub Icon
</p>
<p>
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
Twitter Icon
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-facebook"></i>
</span>
Facebook Icon
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-github"></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="span4">
<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="span4">
<p>
Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and
<a href="https://twitter.com/johnsmclay">@johnsmclay</a> for developing and hosting
<a href="http://icnfnt.com/">icnfnt</a>, the best way to subset Font Awesome.
</p>
</div>
<div class="span4">
<p>
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</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,38 @@
{% capture stripe_ad_content %}
<p class="lead">
Font Awesome is always getting a little awesome-er. So here's what's new in the latest version, Font Awesome
{{ site.fontawesome.minor_version }}. Have some ideas for new features?
<a href="{{ page.relative_path }}community/">Help contribute</a>.
</p>
{% endcapture %}
{% include stripe-ad.html %}
<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>
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>
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>
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>
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>
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>
Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see
what's new and changed.
</div>
</div>
</div>

View File

@@ -0,0 +1,41 @@
<div id="why">
<div class="row">
<div class="span4">
<h4><i class="icon-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>
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>
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>
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>
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>
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>
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>
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>
Font Awesome won't trip up screen readers, unlike other icon fonts.
</div>
</div>
</div>