From 043042428ce7eea3daec258743349ff23c40b6e6 Mon Sep 17 00:00:00 2001 From: friendica Date: Tue, 8 Oct 2013 16:11:20 -0700 Subject: add font_awesome --- .../src/_includes/examples/animated-spinner.html | 20 ++++++++ .../src/_includes/examples/bordered-pulled.html | 33 +++++++++++++ .../src/_includes/examples/bulleted-lists.html | 31 ++++++++++++ .../src/_includes/examples/button-dropdowns.html | 36 ++++++++++++++ .../src/_includes/examples/button-groups.html | 25 ++++++++++ .../src/_includes/examples/buttons.html | 57 ++++++++++++++++++++++ .../src/_includes/examples/custom.html | 16 ++++++ .../src/_includes/examples/form-inputs.html | 31 ++++++++++++ .../src/_includes/examples/inline-icons.html | 19 ++++++++ .../src/_includes/examples/larger-icons.html | 35 +++++++++++++ .../src/_includes/examples/navigation.html | 26 ++++++++++ .../font_awesome/src/_includes/examples/new.html | 47 ++++++++++++++++++ .../src/_includes/examples/rotated-flipped.html | 29 +++++++++++ .../src/_includes/examples/stacked.html | 55 +++++++++++++++++++++ 14 files changed, 460 insertions(+) create mode 100644 library/font_awesome/src/_includes/examples/animated-spinner.html create mode 100644 library/font_awesome/src/_includes/examples/bordered-pulled.html create mode 100644 library/font_awesome/src/_includes/examples/bulleted-lists.html create mode 100644 library/font_awesome/src/_includes/examples/button-dropdowns.html create mode 100644 library/font_awesome/src/_includes/examples/button-groups.html create mode 100644 library/font_awesome/src/_includes/examples/buttons.html create mode 100644 library/font_awesome/src/_includes/examples/custom.html create mode 100644 library/font_awesome/src/_includes/examples/form-inputs.html create mode 100644 library/font_awesome/src/_includes/examples/inline-icons.html create mode 100644 library/font_awesome/src/_includes/examples/larger-icons.html create mode 100644 library/font_awesome/src/_includes/examples/navigation.html create mode 100644 library/font_awesome/src/_includes/examples/new.html create mode 100644 library/font_awesome/src/_includes/examples/rotated-flipped.html create mode 100644 library/font_awesome/src/_includes/examples/stacked.html (limited to 'library/font_awesome/src/_includes/examples') diff --git a/library/font_awesome/src/_includes/examples/animated-spinner.html b/library/font_awesome/src/_includes/examples/animated-spinner.html new file mode 100644 index 000000000..eee013a11 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/animated-spinner.html @@ -0,0 +1,20 @@ +
+

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... +
+{% highlight html %} + Spinner icon when loading content... +{% endhighlight %} +

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

+
+
+
diff --git a/library/font_awesome/src/_includes/examples/bordered-pulled.html b/library/font_awesome/src/_includes/examples/bordered-pulled.html new file mode 100644 index 000000000..b5aa2bf17 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/bordered-pulled.html @@ -0,0 +1,33 @@ +
+

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. +
+{% highlight html %} + +Use a few of the new styles together ... lots of new possibilities. +{% endhighlight %} +
+ + 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. +
+{% highlight html %} + +Use a few of the new styles together ... lots of new possibilities. +{% endhighlight %} +
+
+
diff --git a/library/font_awesome/src/_includes/examples/bulleted-lists.html b/library/font_awesome/src/_includes/examples/bulleted-lists.html new file mode 100644 index 000000000..73db34e47 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/bulleted-lists.html @@ -0,0 +1,31 @@ +
+

Bulleted Lists

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

Easily replace individual bullets.

+{% highlight html %} +
    +
  • Bulleted lists (like this one)
    • +
  • Buttons
    • +
  • Button groups
    • +
  • Navigation
    • +
  • Prepended form inputs
    • +
  • …and many more with custom CSS
    • +
+{% endhighlight %} +
Make sure to NOT include any whitespace after the icon declaration.
+
+
+
diff --git a/library/font_awesome/src/_includes/examples/button-dropdowns.html b/library/font_awesome/src/_includes/examples/button-dropdowns.html new file mode 100644 index 000000000..201eb1cd4 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/button-dropdowns.html @@ -0,0 +1,36 @@ +
+

Button Dropdowns

+
+
+
+ User + + + +
+
+
+{% highlight html %} +
+ User + + + +
+{% endhighlight %} +
Don't forget to add the appropriate JavaScript to enable button dropdowns.
+
+
+
diff --git a/library/font_awesome/src/_includes/examples/button-groups.html b/library/font_awesome/src/_includes/examples/button-groups.html new file mode 100644 index 000000000..ce4892309 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/button-groups.html @@ -0,0 +1,25 @@ +
+

Button Groups

+
+
+

+

+ + + + +
+

+
+
+{% highlight html %} +
+ + + + +
+{% endhighlight %} +
+
+
diff --git a/library/font_awesome/src/_includes/examples/buttons.html b/library/font_awesome/src/_includes/examples/buttons.html new file mode 100644 index 000000000..b8d147c07 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/buttons.html @@ -0,0 +1,57 @@ +
+

Buttons

+
+
+

+ + Reload + + Checkout +

+

+ + Comment + + Info +

+

+ + Delete + + Settings +

+

+ + Font Awesome
Version {{ site.fontawesome.version }} +

+

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

+{% highlight html %} + + Reload + + Checkout + + Comment + + Info + + Delete + + Settings + + Font Awesome
Version {{ site.fontawesome.version }} + + Synchronizing Content... +{% endhighlight %} +
+
+
diff --git a/library/font_awesome/src/_includes/examples/custom.html b/library/font_awesome/src/_includes/examples/custom.html new file mode 100644 index 000000000..dfad1900c --- /dev/null +++ b/library/font_awesome/src/_includes/examples/custom.html @@ -0,0 +1,16 @@ +
+

Custom CSS

+
+
+

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

+
+
+

Star Ratings (inspired by CSS Tricks)

+
+ + + +
+
+
+
diff --git a/library/font_awesome/src/_includes/examples/form-inputs.html b/library/font_awesome/src/_includes/examples/form-inputs.html new file mode 100644 index 000000000..dcb39a8f2 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/form-inputs.html @@ -0,0 +1,31 @@ +
+

Prepended & Appended Form Inputs

+
+
+
+
+ + +
+
+ + +
+
+
+
+{% highlight html %} +
+
+ + +
+
+ + +
+
+{% endhighlight %} +
+
+
diff --git a/library/font_awesome/src/_includes/examples/inline-icons.html b/library/font_awesome/src/_includes/examples/inline-icons.html new file mode 100644 index 000000000..3965e7c2a --- /dev/null +++ b/library/font_awesome/src/_includes/examples/inline-icons.html @@ -0,0 +1,19 @@ +
+

Inline Icons

+
+
+

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

+
+
+
+
+ icon-camera-retro +
+
+{% highlight html %} + icon-camera-retro +{% endhighlight %} +
Icon classes are echoed via CSS :before.
+
+
+
diff --git a/library/font_awesome/src/_includes/examples/larger-icons.html b/library/font_awesome/src/_includes/examples/larger-icons.html new file mode 100644 index 000000000..95f1ee13b --- /dev/null +++ b/library/font_awesome/src/_includes/examples/larger-icons.html @@ -0,0 +1,35 @@ +
+

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

+
+
+{% highlight html %} +

icon-camera-retro

+

icon-camera-retro

+

icon-camera-retro

+

icon-camera-retro

+{% endhighlight %} +
+ If your icons are getting chopped off on top and bottom, make sure you have + sufficient line-height. +
+
+
+
diff --git a/library/font_awesome/src/_includes/examples/navigation.html b/library/font_awesome/src/_includes/examples/navigation.html new file mode 100644 index 000000000..850e64442 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/navigation.html @@ -0,0 +1,26 @@ + diff --git a/library/font_awesome/src/_includes/examples/new.html b/library/font_awesome/src/_includes/examples/new.html new file mode 100644 index 000000000..8393f7d36 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/new.html @@ -0,0 +1,47 @@ +<{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles"> +

New Styles in {{ site.fontawesome.minor_version }}

+
+
+

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
    • +
+
+
+
+ diff --git a/library/font_awesome/src/_includes/examples/rotated-flipped.html b/library/font_awesome/src/_includes/examples/rotated-flipped.html new file mode 100644 index 000000000..cf061cd59 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/rotated-flipped.html @@ -0,0 +1,29 @@ +
+

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 +
+{% highlight html %} +  normal
+  icon-rotate-90
+  icon-rotate-180
+  icon-rotate-270
+  icon-flip-horizontal
+  icon-flip-vertical +{% endhighlight %} +

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

+
+
+
diff --git a/library/font_awesome/src/_includes/examples/stacked.html b/library/font_awesome/src/_includes/examples/stacked.html new file mode 100644 index 000000000..3e7240c12 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/stacked.html @@ -0,0 +1,55 @@ +
+

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 +
+{% highlight html %} + + + + +icon-twitter on icon-check-empty
+ + + + +icon-flag on icon-circle
+ + + + +icon-terminal on icon-sign-blank
+ + + + +icon-camera on icon-ban-circle +{% endhighlight %} +
+
+
-- cgit v1.2.3