diff --git a/CHANGELOG.md b/CHANGELOG.md index e6067649..9190f277 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ ### Issues closed +* #331 Support for third party icons * #930 Remove `vertical-align: top` for icons * #735 Font awesome custom `font-size` * #395 Font awesome stacked icons diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index 74b064ee..0743e16e 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -58,7 +58,8 @@ variables:
-

Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a container:

+

+ The icon element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a reliable square container that will prevent the page to "jump" on page load.

@@ -73,14 +74,15 @@ variables:
-

The icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized at 1em.

+

+ By defualt, 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.

{% include anchor.html name="Sizes" %}

- The Bulma icon container should always be slightly bigger than the font-size used. For example, Font Awesome icons use a font-size of 1em by default, but provides additional sizes. + The Bulma icon container 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.

@@ -115,10 +117,10 @@ variables: - + icon - + 1.5rem x 1.5rem @@ -133,6 +135,19 @@ variables: + + + fa fa-lg + + + 1.33em + + + + + + + icon is-medium @@ -239,7 +254,7 @@ variables: - {% include anchor.html name="Icon variations" %} + {% include anchor.html name="Font Awesome variations" %}

@@ -392,6 +407,330 @@ variables: + {% include anchor.html name="Material Design Icons" %} + +

+

+ For the sake of providing another example, here is how the icon container can be used with Material Design Icons. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Container classContainer sizeMDI classIcon sizeResult
+ icon is-small + + 1rem x 1rem + + mdi + + 1em + + + + +
+ icon + + 1.5rem x 1.5rem + + mdi mdi-18px + + 18px + + + + +
+ mdi mdi-24px + + 24px + + + + +
+ icon is-medium + + 2rem x 2rem + + mdi + + 1em + + + + +
+ mdi mdi-18px + + 18px + + + + +
+ mdi mdi-24px + + 24px + + + + +
+ mdi mdi-36px + + 36px + + + + +
+ icon is-large + + 3rem x 3rem + + mdi + + 1em + + + + +
+ mdi mdi-18px + + 18px + + + + +
+ mdi mdi-24px + + 24px + + + + +
+ mdi mdi-36px + + 36px + + + + +
+ mdi mdi-48px + + 48px + + + + +
+ +
+

+ MDI also provides modifier classes for: +

+
    +
  • + light and dark icons +
    • +
  • + rotated & flipped icons +
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeMaterial Design Icon classResult
+ Light color + + mdi mdi-light + + + + +
+ Dark color + + mdi mdi-dark + + + + +
+ Light inactive color + + mdi mdi-light mdi-inactive + + + + +
+ Dark inactive color + + mdi mdi-dark mdi-inactive + + + + +
+ Flipped + + mdi mdi-flip-h +
+ mdi mdi-flip-v + 		+ + + +
+ + + +
+ Rotated + + mdi mdi-rotate-45 +
+ mdi mdi-rotate-90 +
+ mdi mdi-rotate-180 + 		+ + + +
+ + + +
+ + + +
+ {% include variables.html %}