From a5f843ba9ba3dd3ce9ad22a89d57dfcb5fa46586 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Mon, 26 Feb 2018 11:05:48 +0100 Subject: switch to fork-awesome --- library/font_awesome/src/3.2.1/examples/index.html | 680 --------------------- 1 file changed, 680 deletions(-) delete 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 deleted file mode 100644 index c0604c8c4..000000000 --- a/library/font_awesome/src/3.2.1/examples/index.html +++ /dev/null @@ -1,680 +0,0 @@ - - - - - - - - - - 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