aboutsummaryrefslogtreecommitdiffstats
path: root/library/font_awesome/src/_includes/examples
diff options
context:
space:
mode:
authorfriendica <info@friendica.com>2013-10-08 16:11:20 -0700
committerfriendica <info@friendica.com>2013-10-08 16:11:20 -0700
commit043042428ce7eea3daec258743349ff23c40b6e6 (patch)
tree12211165f3d6dee4d93257a3bfd50a52bd29280b /library/font_awesome/src/_includes/examples
parente9c535f40a591ba9863543673fc91aa76e3a17ac (diff)
downloadvolse-hubzilla-043042428ce7eea3daec258743349ff23c40b6e6.tar.gz
volse-hubzilla-043042428ce7eea3daec258743349ff23c40b6e6.tar.bz2
volse-hubzilla-043042428ce7eea3daec258743349ff23c40b6e6.zip
add font_awesome
Diffstat (limited to 'library/font_awesome/src/_includes/examples')
-rw-r--r--library/font_awesome/src/_includes/examples/animated-spinner.html20
-rw-r--r--library/font_awesome/src/_includes/examples/bordered-pulled.html33
-rw-r--r--library/font_awesome/src/_includes/examples/bulleted-lists.html31
-rw-r--r--library/font_awesome/src/_includes/examples/button-dropdowns.html36
-rw-r--r--library/font_awesome/src/_includes/examples/button-groups.html25
-rw-r--r--library/font_awesome/src/_includes/examples/buttons.html57
-rw-r--r--library/font_awesome/src/_includes/examples/custom.html16
-rw-r--r--library/font_awesome/src/_includes/examples/form-inputs.html31
-rw-r--r--library/font_awesome/src/_includes/examples/inline-icons.html19
-rw-r--r--library/font_awesome/src/_includes/examples/larger-icons.html35
-rw-r--r--library/font_awesome/src/_includes/examples/navigation.html26
-rw-r--r--library/font_awesome/src/_includes/examples/new.html47
-rw-r--r--library/font_awesome/src/_includes/examples/rotated-flipped.html29
-rw-r--r--library/font_awesome/src/_includes/examples/stacked.html55
14 files changed, 460 insertions, 0 deletions
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>&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>
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>&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>
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>&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 %}>
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 &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>
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>