diff options
Diffstat (limited to 'bower_components/font-awesome/src/_includes/examples/larger-icons.html')
-rw-r--r-- | bower_components/font-awesome/src/_includes/examples/larger-icons.html | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/bower_components/font-awesome/src/_includes/examples/larger-icons.html b/bower_components/font-awesome/src/_includes/examples/larger-icons.html new file mode 100644 index 00000000..95f1ee13 --- /dev/null +++ b/bower_components/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> |