diff options
author | Thomas Park <thomas@thomaspark.me> | 2013-11-12 15:34:23 -0500 |
---|---|---|
committer | Thomas Park <thomas@thomaspark.me> | 2013-11-12 15:34:23 -0500 |
commit | 016d9a2ae924c3999ff9aa279511e32c0bfbe7bb (patch) | |
tree | c04189b0eed7025a6764360cbe3613c900353fe6 /bower_components/font-awesome/src/_includes/examples | |
parent | 61dab0661ba43d3192fa8c2945f7343df44049ed (diff) |
update to fontawesome 4
Diffstat (limited to 'bower_components/font-awesome/src/_includes/examples')
20 files changed, 289 insertions, 409 deletions
diff --git a/bower_components/font-awesome/src/_includes/examples/animated-spinner.html b/bower_components/font-awesome/src/_includes/examples/animated-spinner.html deleted file mode 100644 index eee013a1..00000000 --- a/bower_components/font-awesome/src/_includes/examples/animated-spinner.html +++ /dev/null @@ -1,20 +0,0 @@ -<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/bower_components/font-awesome/src/_includes/examples/bootstrap.html b/bower_components/font-awesome/src/_includes/examples/bootstrap.html new file mode 100644 index 00000000..1142b908 --- /dev/null +++ b/bower_components/font-awesome/src/_includes/examples/bootstrap.html @@ -0,0 +1,93 @@ +<section id="bootstrap"> + <h2 class="page-header">Bootstrap 3 Examples</h2> + <div class="row"> + <div class="col-md-3 col-sm-4"> + <p> + <a class="btn btn-danger" href="#"> + <i class="fa fa-trash-o fa-lg"></i> Delete</a> + <a class="btn btn-default btn-sm" href="#"> + <i class="fa fa-cog"></i> Settings</a> + </p> + <p> + <a class="btn btn-lg btn-success" href="#"> + <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> + </p> + <div class="margin-bottom"> + <div class="btn-group"> + <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a> + </div> + </div> + <div class="margin-bottom"> + <div class="input-group margin-bottom-sm"> + <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> + <input class="form-control" type="text" placeholder="Email address"> + </div> + <div class="input-group"> + <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> + <input class="form-control" type="password" placeholder="Password"> + </div> + </div> + <div class="margin-bottom"> + <div class="btn-group open"> + <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a> + <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> + <span class="fa fa-caret-down"></span></a> + <ul class="dropdown-menu"> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li> + <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li> + <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li> + <li class="divider"></li> + <li><a href="#"><i class="i"></i> Make admin</a></li> + </ul> + </div> + </div> + + </div> + <div class="col-md-9 col-sm-8"> + <p> + Font Awesome works great with the full range of Bootstrap components. + </p> +{% highlight html %} +<a class="btn btn-danger" href="#"> + <i class="fa fa-trash-o fa-lg"></i> Delete</a> +<a class="btn btn-default btn-sm" href="#"> + <i class="fa fa-cog"></i> Settings</a> + +<a class="btn btn-lg btn-success" href="#"> + <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> + +<div class="btn-group"> + <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a> +</div> + +<div class="input-group margin-bottom-sm"> + <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> + <input class="form-control" type="text" placeholder="Email address"> +</div> +<div class="input-group"> + <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> + <input class="form-control" type="password" placeholder="Password"> +</div> + +<div class="btn-group open"> + <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a> + <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> + <span class="fa fa-caret-down"></span></a> + <ul class="dropdown-menu"> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li> + <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li> + <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li> + <li class="divider"></li> + <li><a href="#"><i class="i"></i> Make admin</a></li> + </ul> +</div> +{% endhighlight %} + </div> + </div> +</section> diff --git a/bower_components/font-awesome/src/_includes/examples/bordered-pulled.html b/bower_components/font-awesome/src/_includes/examples/bordered-pulled.html index b5aa2bf1..f22ee8e3 100644 --- a/bower_components/font-awesome/src/_includes/examples/bordered-pulled.html +++ b/bower_components/font-awesome/src/_includes/examples/bordered-pulled.html @@ -1,32 +1,20 @@ <section id="bordered-pulled"> <h2 class="page-header">Bordered & Pulled Icons</h2> <div class="row"> - <div class="span3"> + <div class="col-md-3 col-sm-4"> <p> - Use <code>icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or - article graphics. + <i class="fa fa-quote-left fa-2x pull-left fa-border"></i> + Use a few styles together and you'll have easy pull quotes or a great introductory article icon. </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> + <div class="col-md-9 col-sm-8"> + <p> + Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or + article graphics. + </p> {% 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. +<i class="fa fa-quote-left fa-2x pull-left fa-border"></i> +Use a few styles together and you'll have easy pull quotes or a great introductory article icon. {% endhighlight %} </div> </div> diff --git a/bower_components/font-awesome/src/_includes/examples/bulleted-lists.html b/bower_components/font-awesome/src/_includes/examples/bulleted-lists.html deleted file mode 100644 index 73db34e4..00000000 --- a/bower_components/font-awesome/src/_includes/examples/bulleted-lists.html +++ /dev/null @@ -1,31 +0,0 @@ -<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/bower_components/font-awesome/src/_includes/examples/button-dropdowns.html b/bower_components/font-awesome/src/_includes/examples/button-dropdowns.html deleted file mode 100644 index 201eb1cd..00000000 --- a/bower_components/font-awesome/src/_includes/examples/button-dropdowns.html +++ /dev/null @@ -1,36 +0,0 @@ -<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/bower_components/font-awesome/src/_includes/examples/button-groups.html b/bower_components/font-awesome/src/_includes/examples/button-groups.html deleted file mode 100644 index ce489230..00000000 --- a/bower_components/font-awesome/src/_includes/examples/button-groups.html +++ /dev/null @@ -1,25 +0,0 @@ -<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/bower_components/font-awesome/src/_includes/examples/buttons.html b/bower_components/font-awesome/src/_includes/examples/buttons.html deleted file mode 100644 index b8d147c0..00000000 --- a/bower_components/font-awesome/src/_includes/examples/buttons.html +++ /dev/null @@ -1,57 +0,0 @@ -<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/bower_components/font-awesome/src/_includes/examples/custom.html b/bower_components/font-awesome/src/_includes/examples/custom.html index dfad1900..2de7ad7a 100644 --- a/bower_components/font-awesome/src/_includes/examples/custom.html +++ b/bower_components/font-awesome/src/_includes/examples/custom.html @@ -1,10 +1,10 @@ <section id="custom"> <h2 class="page-header">Custom CSS</h2> <div class="row"> - <div class="span3"> + <div class="col-md-3 col-sm-4"> <p>Anything you can do with CSS font styles, you can do with Font Awesome.</p> </div> - <div class="span9"> + <div class="col-md-9 col-sm-8"> <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"> diff --git a/bower_components/font-awesome/src/_includes/examples/fixed-width.html b/bower_components/font-awesome/src/_includes/examples/fixed-width.html new file mode 100644 index 00000000..f14e7e43 --- /dev/null +++ b/bower_components/font-awesome/src/_includes/examples/fixed-width.html @@ -0,0 +1,27 @@ +<section id="fixed-width"> + <h2 class="page-header">Fixed Width Icons</h2> + <div class="row"> + <div class="col-md-3 col-sm-4"> + <ul class="nav nav-pills nav-stacked margin-bottom"> + <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> + <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li> + <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li> + </ul> + </div> + <div class="col-md-9 col-sm-8"> + <p> + Use <code>fa-fw</code> to set icons at a fixed width. Great to use when variable icon widths throw off alignment. + Especially useful in things like nav lists. + </p> +{% highlight html %} +<ul class="nav nav-pills nav-stacked"> + <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> + <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li> + <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li> +</ul> +{% endhighlight %} + </div> + </div> +</section> diff --git a/bower_components/font-awesome/src/_includes/examples/form-inputs.html b/bower_components/font-awesome/src/_includes/examples/form-inputs.html deleted file mode 100644 index dcb39a8f..00000000 --- a/bower_components/font-awesome/src/_includes/examples/form-inputs.html +++ /dev/null @@ -1,31 +0,0 @@ -<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/bower_components/font-awesome/src/_includes/examples/inline-icons.html b/bower_components/font-awesome/src/_includes/examples/inline-icons.html deleted file mode 100644 index 3965e7c2..00000000 --- a/bower_components/font-awesome/src/_includes/examples/inline-icons.html +++ /dev/null @@ -1,19 +0,0 @@ -<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/bower_components/font-awesome/src/_includes/examples/inline.html b/bower_components/font-awesome/src/_includes/examples/inline.html new file mode 100644 index 00000000..93f30245 --- /dev/null +++ b/bower_components/font-awesome/src/_includes/examples/inline.html @@ -0,0 +1,17 @@ +<section id="inline"> + <h2 class="page-header">Inline Icons</h2> + <div class="row"> + <div class="col-md-3 col-sm-4"> + <p> + <i class="fa fa-camera-retro"></i> fa-camera-retro + </p> + </div> + <div class="col-md-9 col-sm-8"> + <p>Place Font Awesome icons just about anywhere with the <code><i></code> tag.</p> +{% highlight html %} +<i class="fa fa-camera-retro"></i> fa-camera-retro +{% endhighlight %} + <div class="alert alert-success"><i class="fa fa-info-circle"></i> Icon classes are echoed via CSS :before.</div> + </div> + </div> +</section> diff --git a/bower_components/font-awesome/src/_includes/examples/larger-icons.html b/bower_components/font-awesome/src/_includes/examples/larger-icons.html deleted file mode 100644 index 95f1ee13..00000000 --- a/bower_components/font-awesome/src/_includes/examples/larger-icons.html +++ /dev/null @@ -1,35 +0,0 @@ -<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/bower_components/font-awesome/src/_includes/examples/larger.html b/bower_components/font-awesome/src/_includes/examples/larger.html new file mode 100644 index 00000000..8c5e2463 --- /dev/null +++ b/bower_components/font-awesome/src/_includes/examples/larger.html @@ -0,0 +1,29 @@ +<section id="larger"> + <h2 class="page-header">Larger Icons</h2> + <div class="row"> + <div class="col-md-3 col-sm-4"> + <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p> + <p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p> + <p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p> + <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p> + <p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p> + </div> + <div class="col-md-9 col-sm-8"> + <p> + To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase), <code>fa-2x</code>, + <code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes. + </p> +{% highlight html %} +<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p> +<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p> +<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p> +<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p> +<p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p> +{% endhighlight %} + <div class="alert alert-success"> + <i class="fa fa-info-circle"></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/bower_components/font-awesome/src/_includes/examples/list.html b/bower_components/font-awesome/src/_includes/examples/list.html new file mode 100644 index 00000000..5cbc1758 --- /dev/null +++ b/bower_components/font-awesome/src/_includes/examples/list.html @@ -0,0 +1,24 @@ +<section id="list"> + <h2 class="page-header">List Icons</h2> + <div class="row"> + <div class="col-md-3 col-sm-4"> + <ul class="fa-ul"> + <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li> + <li><i class="fa-li fa fa-check-square"></i>can be used</li> + <li><i class="fa-li fa fa-spinner fa-spin"></i>to easily replace</li> + <li><i class="fa-li fa fa-square"></i>default bullets in lists</li> + </ul> + </div> + <div class="col-md-9 col-sm-8"> + <p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p> +{% highlight html %} +<ul class="fa-ul"> + <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li> + <li><i class="fa-li fa fa-check-square"></i>can be used</li> + <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li> + <li><i class="fa-li fa fa-square"></i>default bullets in lists</li> +</ul> +{% endhighlight %} + </div> + </div> +</section> diff --git a/bower_components/font-awesome/src/_includes/examples/navigation.html b/bower_components/font-awesome/src/_includes/examples/navigation.html deleted file mode 100644 index 850e6444..00000000 --- a/bower_components/font-awesome/src/_includes/examples/navigation.html +++ /dev/null @@ -1,26 +0,0 @@ -<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/bower_components/font-awesome/src/_includes/examples/new.html b/bower_components/font-awesome/src/_includes/examples/new.html deleted file mode 100644 index 8393f7d3..00000000 --- a/bower_components/font-awesome/src/_includes/examples/new.html +++ /dev/null @@ -1,47 +0,0 @@ -<{% 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/bower_components/font-awesome/src/_includes/examples/rotated-flipped.html b/bower_components/font-awesome/src/_includes/examples/rotated-flipped.html index cf061cd5..ff55f2c1 100644 --- a/bower_components/font-awesome/src/_includes/examples/rotated-flipped.html +++ b/bower_components/font-awesome/src/_includes/examples/rotated-flipped.html @@ -1,29 +1,28 @@ <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 class="col-md-3 col-sm-4"> + <p style="font-size: 18px;"> + <i class="fa fa-shield"></i> normal<br> + <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> + <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> + <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> + <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> + <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical + </p> </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> + <div class="col-md-9 col-sm-8"> + <p> + To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes. + </p> {% 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 +<i class="fa fa-shield"></i> normal<br> +<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> +<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> +<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> +<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> +<i class="fa fa-shield fa-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/bower_components/font-awesome/src/_includes/examples/spinning.html b/bower_components/font-awesome/src/_includes/examples/spinning.html new file mode 100644 index 00000000..4bdb3d0e --- /dev/null +++ b/bower_components/font-awesome/src/_includes/examples/spinning.html @@ -0,0 +1,26 @@ +<section id="spinning"> + <h2 class="page-header">Spinning Icons</h2> + <div class="row"> + <div class="col-md-3 col-sm-4"> + <p> + <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button> + <button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button> + <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button> + </p> + </div> + <div class="col-md-9 col-sm-8"> + <p> + Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>, + <code>fa-refresh</code>, and <code>fa-cog</code>. + </p> +{% highlight html %} +<i class="fa fa-spinner fa-spin"></i> +<i class="fa fa-refresh fa-spin"></i> +<i class="fa fa-cog fa-spin"></i> +{% endhighlight %} + <p class="alert alert-success"> + <i class="fa fa-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9. + </p> + </div> + </div> +</section> 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> |