From 38dd1c342a5d86989a2773f6499c7fbd005e241d Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Tue, 10 Jan 2017 10:19:22 +0100 Subject: font awesome 4.7.0 --- library/font_awesome/src/3.2.1/examples/index.html | 680 +++++++++++++++++++++ 1 file changed, 680 insertions(+) create mode 100644 library/font_awesome/src/3.2.1/examples/index.html (limited to 'library/font_awesome/src/3.2.1/examples/index.html') diff --git a/library/font_awesome/src/3.2.1/examples/index.html b/library/font_awesome/src/3.2.1/examples/index.html new file mode 100644 index 000000000..c0604c8c4 --- /dev/null +++ b/library/font_awesome/src/3.2.1/examples/index.html @@ -0,0 +1,680 @@ + + + + + + + + + + Font Awesome Examples + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + Font Awesome +
+ + +
+
+
+
+ + + + + +
+
+

  Examples

+

Lots of easy ways to use Font Awesome

+
+
+ +
+
+ +
+
+ + +
+ +
+
+
+
+ Heads up! These docs are for v3.2.1, which is no longer officially supported. Check out the latest version of Font Awesome! +
+
+
+
+
+
+
+ +

+ After you get up and running, you can place Font Awesome icons just about + anywhere with the <i> tag. + Many examples appreciatively re-used from the Bootstrap documentation. +

+ +
+
+
+ +
+
+
+ + +
+

New Styles in 3.2

+
+
+

Rotated and Flipped Icons

+
+   normal
+   icon-rotate-90
+   icon-rotate-180
+   icon-rotate-270
+   icon-flip-horizontal
+   icon-flip-vertical +
+
+
+

Stacked Icons

+
+ + + + + icon-twitter on icon-check-empty
+ + + + + icon-flag on icon-circle
+ + + + + icon-terminal on icon-sign-blank +
+
+
+

Better Bulleted Lists

+
+
    +
  • New bulleted lists
    • +
  • Fix some old bugs
    • +
  • And deal with arbitrary
    • +
  • Font sizes better
    • +
+
+
+
+
+ + +
+

Inline Icons

+
+
+

Place Font Awesome icons just about anywhere with the <i> tag.

+
+
+
+
+ icon-camera-retro +
+
+
<i class="icon-camera-retro"></i> icon-camera-retro
+
+
Icon classes are echoed via CSS :before.
+
+
+
+ +
+

Larger Icons

+
+
+

+ To increase the size of icons relative to its container, use icon-large, icon-2x, + icon-3x, or icon-4x. +

+
+
+

+ Increase the icon size by using the icon-large (33% increase), icon-2x, + icon-3x, or icon-4x classes. +

+
+
+

icon-camera-retro

+

icon-camera-retro

+

icon-camera-retro

+

icon-camera-retro

+
+
+
<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>
+
+
+ If your icons are getting chopped off on top and bottom, make sure you have + sufficient line-height. +
+
+
+
+ +
+

Bordered & Pulled Icons

+
+
+

+ Use icon-border and pull-right or pull-left for easy pull quotes or + article graphics. +

+
+
+
+ + 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. +
+
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
+Use a few of the new styles together ... lots of new possibilities.
+
+
+ + 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. +
+
<i class="icon-flag icon-4x pull-left icon-border"></i>
+Use a few of the new styles together ... lots of new possibilities.
+
+
+
+
+ +
+

Buttons

+
+
+

+ + Reload + + Checkout +

+

+ + Comment + + Info +

+

+ + Delete + + Settings +

+

+ + Font Awesome
Version 3.2.1 +

+

+ + Synchronizing Content... +

+
+
+

+ Font Awesome icons work great in buttons. You can even combine them with larger icon styles, + pull-right and pull-left, and icon-spin. +

+
<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 3.2.1</a>
+<a class="btn btn-primary" href="#">
+  <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
+
+
+
+
+ +
+

Button Groups

+
+
+

+

+ + + + +
+

+
+
+
<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>
+
+
+
+
+ +
+

Button Dropdowns

+
+
+
+ User + + + +
+
+
+
<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>
+
+
Don't forget to add the appropriate JavaScript to enable button dropdowns.
+
+
+
+ +
+

Bulleted Lists

+
+
+
+
+
    +
  • Bulleted lists (like this one)
    • +
  • Buttons
    • +
  • Button groups
    • +
  • Navigation
    • +
  • Prepended form inputs
    • +
  • …and many more with custom CSS
    • +
+
+
+

Easily replace individual bullets.

+
<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>
+
+
Make sure to NOT include any whitespace after the icon declaration.
+
+
+
+ + + +
+

Prepended & Appended Form Inputs

+
+
+
+
+ + +
+
+ + +
+
+
+
+
<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>
+
+
+
+
+ +
+

Animated Spinner

+
+
+ Use the icon-spin class to get any icon to rotate. Works well with icon-spinner and + icon-refresh. +
+
+
+ Spinner icon when loading content... +
+
<i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...
+
+

+ CSS3 animations aren't supported in IE7 - IE9. +

+
+
+
+ +
+

Rotated & Flipped

+
+
+ A set of classes that can be used to arbitrarily rotate and flip icons. +
+
+
+   normal
+   icon-rotate-90
+   icon-rotate-180
+   icon-rotate-270
+   icon-flip-horizontal
+   icon-flip-vertical +
+
<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
+
+

+ Rotating and flipping icons aren't yet supported in IE7. +

+
+
+
+ +
+

Stacked Icons

+
+
+ A method for easily stacking multiple icons. Use the icon-stack class on the parent and + icon-stack-base for the bottom icon. +
+
+
+ + + + + icon-twitter on icon-check-empty
+ + + + + icon-flag on icon-circle
+ + + + + icon-terminal on icon-sign-blank
+ + + + + icon-camera on icon-ban-circle +
+
<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
+
+
+
+
+ +
+

Custom CSS

+
+
+

Anything you can do with CSS font styles, you can do with Font Awesome.

+
+
+

Star Ratings (inspired by CSS Tricks)

+
+ + + +
+
+
+
+ + +
+ +
+
+ + + + + + + + + + + -- cgit v1.2.3