+ Since icon fonts are simply text, you can use the text color modifiers to change the icon's color. +
+diff --git a/docs/_config.yml b/docs/_config.yml index 5836a294..894c841c 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -9,10 +9,15 @@ env: "production" markdown: kramdown permalink: pretty url: http://bulma.io -fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -mdi: https://cdn.materialdesignicons.com/1.7.22/css/materialdesignicons.min.css exclude: ['fontawesome', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock'] +# Icons + +fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css +iconic: https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css +ionicons: http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css +mdi: https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css + # Variables documentation: "/documentation/overview/start/" diff --git a/docs/_includes/head.html b/docs/_includes/head.html index 95dbf14f..74dddfc2 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -7,6 +7,12 @@
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.
+ Since icon fonts are simply text, you can use the text color modifiers to change the icon's color. +
+
- 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.
+ 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.
- For the sake of providing another example, here is how the icon container can be used with Material Design Icons.
+ Here is how the icon container can be used with Material Design Icons.
+ Here is how the icon container can be used with Open Iconic.
+
| Container class | +Container size | +Iconic class | +Icon size | +Result | +
|---|---|---|---|---|
+ icon is-small
+ |
+
+ 1rem x 1rem
+ |
+
+ oi [data-glyph=puzzle-piece]
+ |
+
+ 1em
+ |
+ + + + + | +
+ icon
+ |
+
+ 1.5rem x 1.5rem
+ |
+
+ oi [data-glyph=puzzle-piece]
+ |
+
+ 1em
+ |
+ + + + + | +
+ icon is-medium
+ |
+
+ 2rem x 2rem
+ |
+
+ oi [data-glyph=puzzle-piece]
+ |
+
+ 1em
+ |
+ + + + + | +
+ icon is-large
+ |
+
+ 3rem x 3rem
+ |
+
+ oi [data-glyph=puzzle-piece]
+ |
+
+ 1em
+ |
+ + + + + | +
+ Here is how the icon container can be used with Ionicons.
+
| Container class | +Container size | +Ionicon class | +Icon size | +Result | +
|---|---|---|---|---|
+ icon is-small
+ |
+
+ 1rem x 1rem
+ |
+
+ ion-ionic
+ |
+
+ 1em
+ |
+ + + + + | +
+ icon
+ |
+
+ 1.5rem x 1.5rem
+ |
+
+ ion-ionic
+ |
+
+ 1em
+ |
+ + + + + | +
+ icon is-medium
+ |
+
+ 2rem x 2rem
+ |
+
+ ion-ionic
+ |
+
+ 1em
+ |
+ + + + + | +
+ icon is-large
+ |
+
+ 3rem x 3rem
+ |
+
+ ion-ionic
+ |
+
+ 1em
+ |
+ + + + + | +