From 45654ffc5cc4532c2189c88d46a0374038b53c9f Mon Sep 17 00:00:00 2001 From: Treer Date: Sat, 30 Apr 2016 21:36:19 +1000 Subject: update font-awesome library to 4.6.1 Perhaps this should be done as a submodule instead? --- .../src/_includes/examples/accessible.html | 109 ++++++++++++++++++++ .../src/_includes/examples/animated-spinner.html | 20 ---- .../src/_includes/examples/animated.html | 60 +++++++++++ .../font_awesome/src/_includes/examples/basic.html | 39 ++++++++ .../src/_includes/examples/bootstrap.html | 111 +++++++++++++++++++++ .../src/_includes/examples/bordered-pulled.html | 43 ++++---- .../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 | 4 +- .../src/_includes/examples/fixed-width.html | 33 ++++++ .../src/_includes/examples/form-inputs.html | 31 ------ .../src/_includes/examples/inline-icons.html | 19 ---- .../src/_includes/examples/larger-icons.html | 35 ------- .../src/_includes/examples/larger.html | 40 ++++++++ .../font_awesome/src/_includes/examples/list.html | 30 ++++++ .../src/_includes/examples/navigation.html | 26 ----- .../font_awesome/src/_includes/examples/new.html | 47 --------- .../src/_includes/examples/rotated-flipped.html | 47 +++++---- .../src/_includes/examples/stacked.html | 88 ++++++++-------- 21 files changed, 519 insertions(+), 412 deletions(-) create mode 100644 library/font_awesome/src/_includes/examples/accessible.html delete mode 100644 library/font_awesome/src/_includes/examples/animated-spinner.html create mode 100644 library/font_awesome/src/_includes/examples/animated.html create mode 100644 library/font_awesome/src/_includes/examples/basic.html create mode 100644 library/font_awesome/src/_includes/examples/bootstrap.html delete mode 100644 library/font_awesome/src/_includes/examples/bulleted-lists.html delete mode 100644 library/font_awesome/src/_includes/examples/button-dropdowns.html delete mode 100644 library/font_awesome/src/_includes/examples/button-groups.html delete mode 100644 library/font_awesome/src/_includes/examples/buttons.html create mode 100644 library/font_awesome/src/_includes/examples/fixed-width.html delete mode 100644 library/font_awesome/src/_includes/examples/form-inputs.html delete mode 100644 library/font_awesome/src/_includes/examples/inline-icons.html delete mode 100644 library/font_awesome/src/_includes/examples/larger-icons.html create mode 100644 library/font_awesome/src/_includes/examples/larger.html create mode 100644 library/font_awesome/src/_includes/examples/list.html delete mode 100644 library/font_awesome/src/_includes/examples/navigation.html delete mode 100644 library/font_awesome/src/_includes/examples/new.html (limited to 'library/font_awesome/src/_includes/examples') diff --git a/library/font_awesome/src/_includes/examples/accessible.html b/library/font_awesome/src/_includes/examples/accessible.html new file mode 100644 index 000000000..2f51aed9c --- /dev/null +++ b/library/font_awesome/src/_includes/examples/accessible.html @@ -0,0 +1,109 @@ +
+

+ Accessibility-Minded +

+
+
+

+ + + Settings + + + + + Delete + + + + + Skip to main navigation + +

+ +

+ + Refreshing... + + + Saving. Hang tight! +

+ +

+

+ + +
+
+ + +
+

+ +

+ + + View 3 items in your shopping cart + +

+ +

+ + Battery level: 50% +

+
+
+

+ With our thoughts on icon accessibility in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text. +

+ +{% highlight html %} + + + Settings + + + + + Delete + + + + + Skip to main navigation + +{% endhighlight %} + +{% highlight html %} + +Refreshing... + + +Saving. Hang tight! +{% endhighlight %} + +{% highlight html %} +
+ + +
+
+ + +
+{% endhighlight %} + +{% highlight html %} + + + View 3 items in your shopping cart + +{% endhighlight %} + +{% highlight html %} + +Battery level: 50% +{% endhighlight %} +
+
+
diff --git a/library/font_awesome/src/_includes/examples/animated-spinner.html b/library/font_awesome/src/_includes/examples/animated-spinner.html deleted file mode 100644 index eee013a11..000000000 --- a/library/font_awesome/src/_includes/examples/animated-spinner.html +++ /dev/null @@ -1,20 +0,0 @@ -
-

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/animated.html b/library/font_awesome/src/_includes/examples/animated.html new file mode 100644 index 000000000..960ebd182 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/animated.html @@ -0,0 +1,60 @@ +
+

+ Animated Icons + +

+
+
+

+ + Loading example (with fa-spinner icon) + + + Loading (with fa-circle-o-notch icon) + + + Loading example (with fa-refresh icon) + + + Loading example (with fa-cog icon) + + + Loading example (with fa-spinner icon) +

+
+
+

+ Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate + with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog. +

+{% highlight html %} + +Loading... + + +Loading... + + +Loading... + + +Loading... + + +Loading... +{% endhighlight %} +

+ Note: + Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See + issue #671 + for examples and possible workarounds. +

+

+ Note: CSS3 animations aren't supported in IE8 - IE9. +

+
+
+
diff --git a/library/font_awesome/src/_includes/examples/basic.html b/library/font_awesome/src/_includes/examples/basic.html new file mode 100644 index 000000000..2b691a0b5 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/basic.html @@ -0,0 +1,39 @@ +
+

+ Basic Icons + +

+ +
+
+

+ + Example: basic icon + fa-camera-retro +

+
+
+

+ You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's + name. Font Awesome is designed to be used with inline elements (we like the <i> tag for + brevity, but using a <span> is more semantically correct). +

+{% highlight html %} + fa-camera-retro +{% endhighlight %} +
+
    +
  • + + Example: basic icon + If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, + drop shadow, and anything else that gets inherited using CSS. +
    • +
+
+
+
+
diff --git a/library/font_awesome/src/_includes/examples/bootstrap.html b/library/font_awesome/src/_includes/examples/bootstrap.html new file mode 100644 index 000000000..0d6c03b8f --- /dev/null +++ b/library/font_awesome/src/_includes/examples/bootstrap.html @@ -0,0 +1,111 @@ +
+

Bootstrap 3 Examples

+
+
+

+ + Delete + + Settings +

+

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

+
+
+ + + + + + + + + + + + +
+
+
+
+ + +
+
+ + +
+
+
+
+ User + + + + +
+
+ +
+
+

+ Font Awesome works great with the full range of Bootstrap components. +

+{% highlight html %} + + Delete + + Settings + + + Font Awesome
Version {{ site.fontawesome.version }} + +
+ + + + + + + + + + + + +
+ +
+ + +
+
+ + +
+ +
+ User + + + + +
+{% endhighlight %} +
+
+
diff --git a/library/font_awesome/src/_includes/examples/bordered-pulled.html b/library/font_awesome/src/_includes/examples/bordered-pulled.html index b5aa2bf17..33f9922ed 100644 --- a/library/font_awesome/src/_includes/examples/bordered-pulled.html +++ b/library/font_awesome/src/_includes/examples/bordered-pulled.html @@ -1,32 +1,29 @@
-

Bordered & Pulled Icons

+

+ Bordered & Pulled Icons + +

-
+

- Use icon-border and pull-right or pull-left for easy pull quotes or - article graphics. + + …tomorrow we will run faster, stretch out our arms farther… And then one fine morning— + So we beat on, boats against the current, borne back ceaselessly into the past.

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

+ Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or + article icons. +

{% highlight html %} - -Use a few of the new styles together ... lots of new possibilities. + +...tomorrow we will run faster, stretch out our arms farther... +And then one fine morning— So we beat on, boats against the +current, borne back ceaselessly into the past. {% endhighlight %}
diff --git a/library/font_awesome/src/_includes/examples/bulleted-lists.html b/library/font_awesome/src/_includes/examples/bulleted-lists.html deleted file mode 100644 index 73db34e47..000000000 --- a/library/font_awesome/src/_includes/examples/bulleted-lists.html +++ /dev/null @@ -1,31 +0,0 @@ -
-

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 deleted file mode 100644 index 201eb1cd4..000000000 --- a/library/font_awesome/src/_includes/examples/button-dropdowns.html +++ /dev/null @@ -1,36 +0,0 @@ -
-

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 deleted file mode 100644 index ce4892309..000000000 --- a/library/font_awesome/src/_includes/examples/button-groups.html +++ /dev/null @@ -1,25 +0,0 @@ -
-

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 deleted file mode 100644 index b8d147c07..000000000 --- a/library/font_awesome/src/_includes/examples/buttons.html +++ /dev/null @@ -1,57 +0,0 @@ -
-

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 index dfad1900c..2de7ad7ab 100644 --- a/library/font_awesome/src/_includes/examples/custom.html +++ b/library/font_awesome/src/_includes/examples/custom.html @@ -1,10 +1,10 @@

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/fixed-width.html b/library/font_awesome/src/_includes/examples/fixed-width.html new file mode 100644 index 000000000..845a79609 --- /dev/null +++ b/library/font_awesome/src/_includes/examples/fixed-width.html @@ -0,0 +1,33 @@ +
+

+ Fixed Width Icons + +

+
+
+
+   Home +   Library +   Applications +   Settings +
+
+
+

+ Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. + Especially useful in things like nav lists & list groups. +

+{% highlight html %} +
+   Home +   Library +   Applications +   Settings +
+{% endhighlight %} +
+
+
diff --git a/library/font_awesome/src/_includes/examples/form-inputs.html b/library/font_awesome/src/_includes/examples/form-inputs.html deleted file mode 100644 index dcb39a8f2..000000000 --- a/library/font_awesome/src/_includes/examples/form-inputs.html +++ /dev/null @@ -1,31 +0,0 @@ -
-

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 deleted file mode 100644 index 3965e7c2a..000000000 --- a/library/font_awesome/src/_includes/examples/inline-icons.html +++ /dev/null @@ -1,19 +0,0 @@ -
-

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 deleted file mode 100644 index 95f1ee13b..000000000 --- a/library/font_awesome/src/_includes/examples/larger-icons.html +++ /dev/null @@ -1,35 +0,0 @@ -
-

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/larger.html b/library/font_awesome/src/_includes/examples/larger.html new file mode 100644 index 000000000..f10c7188a --- /dev/null +++ b/library/font_awesome/src/_includes/examples/larger.html @@ -0,0 +1,40 @@ +
+

+ Larger Icons + +

+
+
+

fa-lg

+

fa-2x

+

fa-3x

+

fa-4x

+

fa-5x

+
+
+

+ To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, + fa-3x, fa-4x, or fa-5x classes. +

+{% highlight html %} + fa-lg + fa-2x + fa-3x + fa-4x + fa-5x +{% 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/list.html b/library/font_awesome/src/_includes/examples/list.html new file mode 100644 index 000000000..a708902be --- /dev/null +++ b/library/font_awesome/src/_includes/examples/list.html @@ -0,0 +1,30 @@ +
+

+ List Icons + +

+
+
+
    +
  • List icons
    • +
  • can be used
    • +
  • as bullets
    • +
  • in lists
    • +
+
+
+

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

+{% highlight html %} +
    +
  • List icons
    • +
  • can be used
    • +
  • as bullets
    • +
  • in lists
    • +
+{% endhighlight %} +
+
+
diff --git a/library/font_awesome/src/_includes/examples/navigation.html b/library/font_awesome/src/_includes/examples/navigation.html deleted file mode 100644 index 850e64442..000000000 --- a/library/font_awesome/src/_includes/examples/navigation.html +++ /dev/null @@ -1,26 +0,0 @@ - diff --git a/library/font_awesome/src/_includes/examples/new.html b/library/font_awesome/src/_includes/examples/new.html deleted file mode 100644 index 8393f7d36..000000000 --- a/library/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"> -

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 index cf061cd59..4c5b437f1 100644 --- a/library/font_awesome/src/_includes/examples/rotated-flipped.html +++ b/library/font_awesome/src/_includes/examples/rotated-flipped.html @@ -1,29 +1,34 @@
-

Rotated & Flipped

+

+ Rotated & Flipped + +

-
- A set of classes that can be used to arbitrarily rotate and flip icons. +
+

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

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

+ To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes. +

{% highlight html %} -  normal
-  icon-rotate-90
-  icon-rotate-180
-  icon-rotate-270
-  icon-flip-horizontal
-  icon-flip-vertical + normal
+ fa-rotate-90
+ fa-rotate-180
+ fa-rotate-270
+ fa-flip-horizontal
+ fa-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 index 3e7240c12..505ed2edf 100644 --- a/library/font_awesome/src/_includes/examples/stacked.html +++ b/library/font_awesome/src/_includes/examples/stacked.html @@ -1,54 +1,64 @@
-

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

+ Stacked Icons + -
-
- - - +

+
+
+
+ - icon-twitter on icon-check-empty
- - - + fa-twitter on fa-square-o
+ - icon-flag on icon-circle
- - - + fa-flag on fa-circle
+ - icon-terminal on icon-sign-blank
- - - + fa-terminal on fa-square
+ - icon-camera on icon-ban-circle + fa-ban on fa-camera
+
+
+

+ To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x + for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse + can be used as an alternative icon color. You can even throw larger icon classes on the parent + to get further control of sizing. +

{% highlight html %} - - - + + + -icon-twitter on icon-check-empty
- - - +fa-twitter on fa-square-o
+ + + -icon-flag on icon-circle
- - - +fa-flag on fa-circle
+ + + -icon-terminal on icon-sign-blank
- - - +fa-terminal on fa-square
+ + + -icon-camera on icon-ban-circle +fa-ban on fa-camera {% endhighlight %}
-- cgit v1.2.3