summaryrefslogtreecommitdiff
path: root/bower_components/font-awesome/src/_includes/examples/stacked.html
diff options
context:
space:
mode:
authorThomas Park <thomas@thomaspark.me>2013-11-12 15:34:23 -0500
committerThomas Park <thomas@thomaspark.me>2013-11-12 15:34:23 -0500
commit016d9a2ae924c3999ff9aa279511e32c0bfbe7bb (patch)
treec04189b0eed7025a6764360cbe3613c900353fe6 /bower_components/font-awesome/src/_includes/examples/stacked.html
parent61dab0661ba43d3192fa8c2945f7343df44049ed (diff)
update to fontawesome 4
Diffstat (limited to 'bower_components/font-awesome/src/_includes/examples/stacked.html')
-rw-r--r--bower_components/font-awesome/src/_includes/examples/stacked.html80
1 files changed, 42 insertions, 38 deletions
diff --git a/bower_components/font-awesome/src/_includes/examples/stacked.html b/bower_components/font-awesome/src/_includes/examples/stacked.html
index 3e7240c1..0a34c5c2 100644
--- a/bower_components/font-awesome/src/_includes/examples/stacked.html
+++ b/bower_components/font-awesome/src/_includes/examples/stacked.html
@@ -1,54 +1,58 @@
<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>
+ <div class="col-md-3 col-sm-4">
+ <div class="margin-bottom">
+ <span class="fa-stack fa-lg">
+ <i class="fa fa-square-o fa-stack-2x"></i>
+ <i class="fa fa-twitter fa-stack-1x"></i>
</span>
- 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>
+ fa-twitter on fa-square-o<br>
+ <span class="fa-stack fa-lg">
+ <i class="fa fa-circle fa-stack-2x"></i>
+ <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
- 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>
+ fa-flag on fa-circle<br>
+ <span class="fa-stack fa-lg">
+ <i class="fa fa-square fa-stack-2x"></i>
+ <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
- 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>
+ fa-terminal on fa-square<br>
+ <span class="fa-stack fa-lg">
+ <i class="fa fa-camera fa-stack-1x"></i>
+ <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
- icon-camera on icon-ban-circle
+ fa-ban on fa-camera
</div>
+ </div>
+ <div class="col-md-9 col-sm-8">
+ <p>
+ To stack multiple icons, use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
+ for the regularly sized icon, and <code>fa-stack-2x</code> for the larger icon. <code>fa-inverse</code>
+ can be used as an alternative icon color. You can even throw <a href="#larger">larger icon</a> classes on the parent
+ to get further control of sizing.
+ </p>
{% highlight html %}
-<span class="icon-stack">
- <i class="icon-check-empty icon-stack-base"></i>
- <i class="icon-twitter"></i>
+<span class="fa-stack fa-lg">
+ <i class="fa fa-square-o fa-stack-2x"></i>
+ <i class="fa fa-twitter fa-stack-1x"></i>
</span>
-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>
+fa-twitter on fa-square-o<br>
+<span class="fa-stack fa-lg">
+ <i class="fa fa-circle fa-stack-2x"></i>
+ <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
-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>
+fa-flag on fa-circle<br>
+<span class="fa-stack fa-lg">
+ <i class="fa fa-square fa-stack-2x"></i>
+ <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
-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>
+fa-terminal on fa-square<br>
+<span class="fa-stack fa-lg">
+ <i class="fa fa-camera fa-stack-1x"></i>
+ <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
-icon-camera on icon-ban-circle
+fa-ban on fa-camera
{% endhighlight %}
</div>
</div>