From d47b85d4be3735ebc9929d0d70e626156c731f94 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Wed, 10 Jan 2018 16:45:05 +0000 Subject: [PATCH] Update icons docs with Font Awesome 5 --- docs/documentation/components/nav.html | 2 +- docs/documentation/elements/icon.html | 120 ++++++++++++------------- 2 files changed, 61 insertions(+), 61 deletions(-) diff --git a/docs/documentation/components/nav.html b/docs/documentation/components/nav.html index 390d3567..65df9216 100644 --- a/docs/documentation/components/nav.html +++ b/docs/documentation/components/nav.html @@ -61,7 +61,7 @@ doc-subtab: nav
- + diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index 49fc0d95..f34c65a2 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -11,40 +11,40 @@ doc-subtab: icon {% capture icon_example %} - + {% endcapture %} {% capture icon_color_example %} - + - + - + - + {% endcapture %} {% capture icon_sizes_example %} - + - + - + - + - + {% endcapture %} @@ -54,7 +54,7 @@ doc-subtab: icon

Icons

- Bulma is compatible with all icon font libraries: Font Awesome, Material Design Icons, Open Iconic, Ionicons etc. + Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc.

{% include meta.html @@ -83,7 +83,7 @@ doc-subtab: icon

- By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome icons will inherit the font size.

+ By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.

{% include anchor.html name="Colors" %} @@ -100,7 +100,7 @@ doc-subtab: icon

- The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes. + The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes.

@@ -109,7 +109,7 @@ doc-subtab: icon Container class Container size - Font Awesome class + Font Awesome 5 class Icon size Result @@ -123,14 +123,14 @@ doc-subtab: icon 1rem x 1rem - fa + fas 1em - + @@ -142,27 +142,27 @@ doc-subtab: icon 1.5rem x 1.5rem - fa + fas 1em - + - fa fa-lg + fas fa-lg 1.33em - + @@ -174,40 +174,40 @@ doc-subtab: icon 2rem x 2rem - fa + fas 1em - + - fa fa-lg + fas fa-lg 1.33em - + - fa fa-2x + fas fa-2x 2em - + @@ -219,53 +219,53 @@ doc-subtab: icon 3rem x 3rem - fa + fas 1em - + - fa fa-lg + fas fa-lg 1.33em - + - fa fa-2x + fas fa-2x 2em - + - fa fa-3x + fas fa-3x 3em - + @@ -311,11 +311,11 @@ doc-subtab: icon Fixed width - fa fa-fw + fas fa-fw - + @@ -324,11 +324,11 @@ doc-subtab: icon Bordered - fa fa-border + fas fa-border - + @@ -337,11 +337,11 @@ doc-subtab: icon Animated - fa fa-refresh fa-spin + fas fa-spinner fa-pulse - + @@ -350,36 +350,36 @@ doc-subtab: icon Rotated & flipped - fa fa-shield
- fa fa-shield fa-rotate-90
- fa fa-shield fa-rotate-180
- fa fa-shield fa-rotate-270
- fa fa-shield fa-flip-horizontal
- fa fa-shield fa-flip-vertical + fas fa-shield-alt
+ fas fa-shield-alt data-fa-transform="rotate-90"
+ fas fa-shield-alt data-fa-transform="rotate-180"
+ fas fa-shield-alt data-fa-transform="rotate-270"
+ fas fa-shield-alt data-fa-transform="flip-h"
+ fas fa-shield-alt data-fa-transform="flip-v" - +
- +
- +
- +
- +
- + @@ -390,16 +390,16 @@ doc-subtab: icon {% highlight html %} - - + + {% endhighlight %} - - + + @@ -408,16 +408,16 @@ doc-subtab: icon {% highlight html %} - - + + {% endhighlight %} - - + +