diff options
| author | friendica <info@friendica.com> | 2013-10-08 16:11:20 -0700 |
|---|---|---|
| committer | friendica <info@friendica.com> | 2013-10-08 16:11:20 -0700 |
| commit | 043042428ce7eea3daec258743349ff23c40b6e6 (patch) | |
| tree | 12211165f3d6dee4d93257a3bfd50a52bd29280b /library/font_awesome/src/_includes | |
| parent | e9c535f40a591ba9863543673fc91aa76e3a17ac (diff) | |
| download | volse-hubzilla-043042428ce7eea3daec258743349ff23c40b6e6.tar.gz volse-hubzilla-043042428ce7eea3daec258743349ff23c40b6e6.tar.bz2 volse-hubzilla-043042428ce7eea3daec258743349ff23c40b6e6.zip | |
add font_awesome
Diffstat (limited to 'library/font_awesome/src/_includes')
53 files changed, 1370 insertions, 0 deletions
diff --git a/library/font_awesome/src/_includes/ads/carbon-dark-vertical.html b/library/font_awesome/src/_includes/ads/carbon-dark-vertical.html new file mode 100644 index 000000000..15804e73a --- /dev/null +++ b/library/font_awesome/src/_includes/ads/carbon-dark-vertical.html @@ -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> diff --git a/library/font_awesome/src/_includes/ads/carbon-light-horizontal.html b/library/font_awesome/src/_includes/ads/carbon-light-horizontal.html new file mode 100644 index 000000000..8dcfb61b6 --- /dev/null +++ b/library/font_awesome/src/_includes/ads/carbon-light-horizontal.html @@ -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> diff --git a/library/font_awesome/src/_includes/ads/carbon-light-vertical.html b/library/font_awesome/src/_includes/ads/carbon-light-vertical.html new file mode 100644 index 000000000..e6fce26a9 --- /dev/null +++ b/library/font_awesome/src/_includes/ads/carbon-light-vertical.html @@ -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> diff --git a/library/font_awesome/src/_includes/brand-license.html b/library/font_awesome/src/_includes/brand-license.html new file mode 100644 index 000000000..07dea295a --- /dev/null +++ b/library/font_awesome/src/_includes/brand-license.html @@ -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> diff --git a/library/font_awesome/src/_includes/cheatsheet.html b/library/font_awesome/src/_includes/cheatsheet.html new file mode 100644 index 000000000..81e508c45 --- /dev/null +++ b/library/font_awesome/src/_includes/cheatsheet.html @@ -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, & 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">(&#x{{ icon.unicode }};)</span> + </div> +{% endfor %} +</div> diff --git a/library/font_awesome/src/_includes/community.html b/library/font_awesome/src/_includes/community.html new file mode 100644 index 000000000..f6ba9f060 --- /dev/null +++ b/library/font_awesome/src/_includes/community.html @@ -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 %} diff --git a/library/font_awesome/src/_includes/community/getting-support.html b/library/font_awesome/src/_includes/community/getting-support.html new file mode 100644 index 000000000..8ae311adc --- /dev/null +++ b/library/font_awesome/src/_includes/community/getting-support.html @@ -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> diff --git a/library/font_awesome/src/_includes/community/project-milestones.html b/library/font_awesome/src/_includes/community/project-milestones.html new file mode 100644 index 000000000..ba2a4e493 --- /dev/null +++ b/library/font_awesome/src/_includes/community/project-milestones.html @@ -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> diff --git a/library/font_awesome/src/_includes/community/reporting-bugs.html b/library/font_awesome/src/_includes/community/reporting-bugs.html new file mode 100644 index 000000000..3dde63fa5 --- /dev/null +++ b/library/font_awesome/src/_includes/community/reporting-bugs.html @@ -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> diff --git a/library/font_awesome/src/_includes/community/requesting-new-icons.html b/library/font_awesome/src/_includes/community/requesting-new-icons.html new file mode 100644 index 000000000..d710e2bb1 --- /dev/null +++ b/library/font_awesome/src/_includes/community/requesting-new-icons.html @@ -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> diff --git a/library/font_awesome/src/_includes/community/submitting-pull-requests.html b/library/font_awesome/src/_includes/community/submitting-pull-requests.html new file mode 100644 index 000000000..de79930e6 --- /dev/null +++ b/library/font_awesome/src/_includes/community/submitting-pull-requests.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples.html b/library/font_awesome/src/_includes/examples.html new file mode 100644 index 000000000..0598e28be --- /dev/null +++ b/library/font_awesome/src/_includes/examples.html @@ -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><i></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 %} diff --git a/library/font_awesome/src/_includes/examples/animated-spinner.html b/library/font_awesome/src/_includes/examples/animated-spinner.html new file mode 100644 index 000000000..eee013a11 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/animated-spinner.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples/bordered-pulled.html b/library/font_awesome/src/_includes/examples/bordered-pulled.html new file mode 100644 index 000000000..b5aa2bf17 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/bordered-pulled.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples/bulleted-lists.html b/library/font_awesome/src/_includes/examples/bulleted-lists.html new file mode 100644 index 000000000..73db34e47 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/bulleted-lists.html @@ -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>…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>…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> diff --git a/library/font_awesome/src/_includes/examples/button-dropdowns.html b/library/font_awesome/src/_includes/examples/button-dropdowns.html new file mode 100644 index 000000000..201eb1cd4 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/button-dropdowns.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples/button-groups.html b/library/font_awesome/src/_includes/examples/button-groups.html new file mode 100644 index 000000000..ce4892309 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/button-groups.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples/buttons.html b/library/font_awesome/src/_includes/examples/buttons.html new file mode 100644 index 000000000..b8d147c07 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/buttons.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples/custom.html b/library/font_awesome/src/_includes/examples/custom.html new file mode 100644 index 000000000..dfad1900c --- /dev/null +++ b/library/font_awesome/src/_includes/examples/custom.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples/form-inputs.html b/library/font_awesome/src/_includes/examples/form-inputs.html new file mode 100644 index 000000000..dcb39a8f2 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/form-inputs.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples/inline-icons.html b/library/font_awesome/src/_includes/examples/inline-icons.html new file mode 100644 index 000000000..3965e7c2a --- /dev/null +++ b/library/font_awesome/src/_includes/examples/inline-icons.html @@ -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><i></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> diff --git a/library/font_awesome/src/_includes/examples/larger-icons.html b/library/font_awesome/src/_includes/examples/larger-icons.html new file mode 100644 index 000000000..95f1ee13b --- /dev/null +++ b/library/font_awesome/src/_includes/examples/larger-icons.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples/navigation.html b/library/font_awesome/src/_includes/examples/navigation.html new file mode 100644 index 000000000..850e64442 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/navigation.html @@ -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> diff --git a/library/font_awesome/src/_includes/examples/new.html b/library/font_awesome/src/_includes/examples/new.html new file mode 100644 index 000000000..8393f7d36 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/new.html @@ -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> normal<br> + <i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br> + <i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br> + <i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br> + <i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br> + <i class="icon-shield icon-flip-vertical"></i> 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 %}> diff --git a/library/font_awesome/src/_includes/examples/rotated-flipped.html b/library/font_awesome/src/_includes/examples/rotated-flipped.html new file mode 100644 index 000000000..cf061cd59 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/rotated-flipped.html @@ -0,0 +1,29 @@ +<section id="rotated-flipped"> + <h2 class="page-header">Rotated & 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> normal<br> + <i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br> + <i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br> + <i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br> + <i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br> + <i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical + </div> +{% highlight html %} +<i class="icon-shield"></i> normal<br> +<i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br> +<i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br> +<i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br> +<i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br> +<i class="icon-shield icon-flip-vertical"></i> 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> diff --git a/library/font_awesome/src/_includes/examples/stacked.html b/library/font_awesome/src/_includes/examples/stacked.html new file mode 100644 index 000000000..3e7240c12 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/stacked.html @@ -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> diff --git a/library/font_awesome/src/_includes/footer.html b/library/font_awesome/src/_includes/footer.html new file mode 100644 index 000000000..186b1524d --- /dev/null +++ b/library/font_awesome/src/_includes/footer.html @@ -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">·</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">·</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">·</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> · + <a href="{{ site.fontawesome.github.url }}/issues">Issues</a> + </div> + </div> +</footer> diff --git a/library/font_awesome/src/_includes/get-started.html b/library/font_awesome/src/_includes/get-started.html new file mode 100644 index 000000000..34b970fd4 --- /dev/null +++ b/library/font_awesome/src/_includes/get-started.html @@ -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><head></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><head></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><head></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> diff --git a/library/font_awesome/src/_includes/icons.html b/library/font_awesome/src/_includes/icons.html new file mode 100644 index 000000000..aeb802805 --- /dev/null +++ b/library/font_awesome/src/_includes/icons.html @@ -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 %} diff --git a/library/font_awesome/src/_includes/icons/brand.html b/library/font_awesome/src/_includes/icons/brand.html new file mode 100644 index 000000000..feb6032e8 --- /dev/null +++ b/library/font_awesome/src/_includes/icons/brand.html @@ -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> diff --git a/library/font_awesome/src/_includes/icons/currency.html b/library/font_awesome/src/_includes/icons/currency.html new file mode 100644 index 000000000..c451d5211 --- /dev/null +++ b/library/font_awesome/src/_includes/icons/currency.html @@ -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> diff --git a/library/font_awesome/src/_includes/icons/directional.html b/library/font_awesome/src/_includes/icons/directional.html new file mode 100644 index 000000000..6b4170a1b --- /dev/null +++ b/library/font_awesome/src/_includes/icons/directional.html @@ -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> diff --git a/library/font_awesome/src/_includes/icons/medical.html b/library/font_awesome/src/_includes/icons/medical.html new file mode 100644 index 000000000..7d4cd7f97 --- /dev/null +++ b/library/font_awesome/src/_includes/icons/medical.html @@ -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> diff --git a/library/font_awesome/src/_includes/icons/new.html b/library/font_awesome/src/_includes/icons/new.html new file mode 100644 index 000000000..52c5e3fa6 --- /dev/null +++ b/library/font_awesome/src/_includes/icons/new.html @@ -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 %}> diff --git a/library/font_awesome/src/_includes/icons/text-editor.html b/library/font_awesome/src/_includes/icons/text-editor.html new file mode 100644 index 000000000..2c2d4955c --- /dev/null +++ b/library/font_awesome/src/_includes/icons/text-editor.html @@ -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> diff --git a/library/font_awesome/src/_includes/icons/video-player.html b/library/font_awesome/src/_includes/icons/video-player.html new file mode 100644 index 000000000..5fcbe133b --- /dev/null +++ b/library/font_awesome/src/_includes/icons/video-player.html @@ -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> diff --git a/library/font_awesome/src/_includes/icons/web-application.html b/library/font_awesome/src/_includes/icons/web-application.html new file mode 100644 index 000000000..f70d727f7 --- /dev/null +++ b/library/font_awesome/src/_includes/icons/web-application.html @@ -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> diff --git a/library/font_awesome/src/_includes/jumbotron-slider.html b/library/font_awesome/src/_includes/jumbotron-slider.html new file mode 100644 index 000000000..362eeac70 --- /dev/null +++ b/library/font_awesome/src/_includes/jumbotron-slider.html @@ -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> + 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> · + Version {{ site.fontawesome.version }} · + Created & 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> diff --git a/library/font_awesome/src/_includes/jumbotron.html b/library/font_awesome/src/_includes/jumbotron.html new file mode 100644 index 000000000..747b32ded --- /dev/null +++ b/library/font_awesome/src/_includes/jumbotron.html @@ -0,0 +1,6 @@ +<div class="jumbotron jumbotron-ad hidden-print"> + <div class="container"> + <h1>{{ jumbotron_h1 }}</h1> + <p>{{ jumbotron_p }}</p> + </div> +</div> diff --git a/library/font_awesome/src/_includes/license-code.less b/library/font_awesome/src/_includes/license-code.less new file mode 100644 index 000000000..940e9a586 --- /dev/null +++ b/library/font_awesome/src/_includes/license-code.less @@ -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 }} + */
\ No newline at end of file diff --git a/library/font_awesome/src/_includes/license.html b/library/font_awesome/src/_includes/license.html new file mode 100644 index 000000000..8b2948095 --- /dev/null +++ b/library/font_awesome/src/_includes/license.html @@ -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> diff --git a/library/font_awesome/src/_includes/navbar.html b/library/font_awesome/src/_includes/navbar.html new file mode 100644 index 000000000..99e1f5819 --- /dev/null +++ b/library/font_awesome/src/_includes/navbar.html @@ -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> Icons</a></li> + <li class="divider"></li> + <li><a href="{{ page.relative_path }}icons/#new"><i class="icon-shield icon-fixed-width"></i> 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> Web Application Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i> Currency Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i> Text Editor Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i> Directional Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i> Video Player Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i> Brand Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i> 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 & 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> diff --git a/library/font_awesome/src/_includes/stripe-ad.html b/library/font_awesome/src/_includes/stripe-ad.html new file mode 100644 index 000000000..64a278609 --- /dev/null +++ b/library/font_awesome/src/_includes/stripe-ad.html @@ -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> diff --git a/library/font_awesome/src/_includes/stripe-social.html b/library/font_awesome/src/_includes/stripe-social.html new file mode 100644 index 000000000..6c303e385 --- /dev/null +++ b/library/font_awesome/src/_includes/stripe-social.html @@ -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> diff --git a/library/font_awesome/src/_includes/tell-me-thanks.html b/library/font_awesome/src/_includes/tell-me-thanks.html new file mode 100644 index 000000000..94be6b209 --- /dev/null +++ b/library/font_awesome/src/_includes/tell-me-thanks.html @@ -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> diff --git a/library/font_awesome/src/_includes/tests/rotated-flipped-inside-anchor.html b/library/font_awesome/src/_includes/tests/rotated-flipped-inside-anchor.html new file mode 100644 index 000000000..df11b37b4 --- /dev/null +++ b/library/font_awesome/src/_includes/tests/rotated-flipped-inside-anchor.html @@ -0,0 +1,6 @@ +<a href="#"><i class="icon-flag"></i> normal</a><br> +<a href="#"><i class="icon-flag icon-rotate-90"></i> icon-rotate-90</a><br> +<a href="#"><i class="icon-flag icon-rotate-180"></i> icon-rotate-180</a><br> +<a href="#"><i class="icon-flag icon-rotate-270"></i> icon-rotate-270</a><br> +<a href="#"><i class="icon-flag icon-flip-horizontal"></i> icon-flip-horizontal</a><br> +<a href="#"><i class="icon-flag icon-flip-vertical"></i> icon-flip-vertical</a> diff --git a/library/font_awesome/src/_includes/tests/rotated-flipped-inside-btn.html b/library/font_awesome/src/_includes/tests/rotated-flipped-inside-btn.html new file mode 100644 index 000000000..c8c9993fd --- /dev/null +++ b/library/font_awesome/src/_includes/tests/rotated-flipped-inside-btn.html @@ -0,0 +1,6 @@ +<a class="btn" href="#"><i class="icon-flag"></i> normal</a><br> +<a class="btn" href="#"><i class="icon-flag icon-rotate-90"></i> icon-rotate-90</a><br> +<a class="btn" href="#"><i class="icon-flag icon-rotate-180"></i> icon-rotate-180</a><br> +<a class="btn" href="#"><i class="icon-flag icon-rotate-270"></i> icon-rotate-270</a><br> +<a class="btn" href="#"><i class="icon-flag icon-flip-horizontal"></i> icon-flip-horizontal</a><br> +<a class="btn" href="#"><i class="icon-flag icon-flip-vertical"></i> icon-flip-vertical</a> diff --git a/library/font_awesome/src/_includes/tests/rotated-flipped.html b/library/font_awesome/src/_includes/tests/rotated-flipped.html new file mode 100644 index 000000000..a6620cd3f --- /dev/null +++ b/library/font_awesome/src/_includes/tests/rotated-flipped.html @@ -0,0 +1,6 @@ +<i class="icon-flag"></i> normal<br> +<i class="icon-flag icon-rotate-90"></i> icon-rotate-90<br> +<i class="icon-flag icon-rotate-180"></i> icon-rotate-180<br> +<i class="icon-flag icon-rotate-270"></i> icon-rotate-270<br> +<i class="icon-flag icon-flip-horizontal"></i> icon-flip-horizontal<br> +<i class="icon-flag icon-flip-vertical"></i> icon-flip-vertical diff --git a/library/font_awesome/src/_includes/tests/stacked-inside-anchor.html b/library/font_awesome/src/_includes/tests/stacked-inside-anchor.html new file mode 100644 index 000000000..d034a9959 --- /dev/null +++ b/library/font_awesome/src/_includes/tests/stacked-inside-anchor.html @@ -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>
\ No newline at end of file diff --git a/library/font_awesome/src/_includes/tests/stacked.html b/library/font_awesome/src/_includes/tests/stacked.html new file mode 100644 index 000000000..36e427f78 --- /dev/null +++ b/library/font_awesome/src/_includes/tests/stacked.html @@ -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>
\ No newline at end of file diff --git a/library/font_awesome/src/_includes/thanks-to.html b/library/font_awesome/src/_includes/thanks-to.html new file mode 100644 index 000000000..8a2d15208 --- /dev/null +++ b/library/font_awesome/src/_includes/thanks-to.html @@ -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> diff --git a/library/font_awesome/src/_includes/whats-new.html b/library/font_awesome/src/_includes/whats-new.html new file mode 100644 index 000000000..d413d0dec --- /dev/null +++ b/library/font_awesome/src/_includes/whats-new.html @@ -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> diff --git a/library/font_awesome/src/_includes/why.html b/library/font_awesome/src/_includes/why.html new file mode 100644 index 000000000..ce3b87d13 --- /dev/null +++ b/library/font_awesome/src/_includes/why.html @@ -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> |