|
|
@@ -58,7 +58,8 @@ variables:
|
|
|
<hr>
|
|
|
|
|
|
<div class="content">
|
|
|
- <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
|
|
|
+ <p>
|
|
|
+ The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to "jump" on page load.</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="block bd-icon-size">
|
|
|
@@ -73,14 +74,15 @@ variables:
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
- <p>The <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized at <code>1em</code>.</p>
|
|
|
+ <p>
|
|
|
+ By defualt, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome icons will <strong>inherit</strong> the font size.</p>
|
|
|
</div>
|
|
|
|
|
|
{% include anchor.html name="Sizes" %}
|
|
|
|
|
|
<div class="content">
|
|
|
<p>
|
|
|
- The Bulma <code>icon</code> container should always be slightly bigger than the font-size used. For example, Font Awesome icons use a font-size of <code>1em</code> by default, but provides <a href="http://fontawesome.io/examples/">additional sizes</a>.
|
|
|
+ The Bulma <code>icon</code> container should always be slightly bigger than the icon it contains. For example, Font Awesome icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="http://fontawesome.io/examples/">additional sizes</a>.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
@@ -115,10 +117,10 @@ variables:
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <td>
|
|
|
+ <td rowspan="2">
|
|
|
<code>icon</code>
|
|
|
</td>
|
|
|
- <td>
|
|
|
+ <td rowspan="2">
|
|
|
<code>1.5rem x 1.5rem</code>
|
|
|
</td>
|
|
|
<td>
|
|
|
@@ -133,6 +135,19 @@ variables:
|
|
|
</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>fa fa-lg</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>1.33em</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon">
|
|
|
+ <i class="fa fa-lg fa-home"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
<tr>
|
|
|
<td rowspan="3">
|
|
|
<code>icon is-medium</code>
|
|
|
@@ -239,7 +254,7 @@ variables:
|
|
|
</tbody>
|
|
|
</table>
|
|
|
|
|
|
- {% include anchor.html name="Icon variations" %}
|
|
|
+ {% include anchor.html name="Font Awesome variations" %}
|
|
|
|
|
|
<div class="content">
|
|
|
<p>
|
|
|
@@ -392,6 +407,330 @@ variables:
|
|
|
</tbody>
|
|
|
</table>
|
|
|
|
|
|
+ {% include anchor.html name="Material Design Icons" %}
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <p>
|
|
|
+ For the sake of providing another example, here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table class="table is-bordered">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Container class</th>
|
|
|
+ <th>Container size</th>
|
|
|
+ <th>MDI class</th>
|
|
|
+ <th>Icon size</th>
|
|
|
+ <th>Result</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>icon is-small</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>1rem x 1rem</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>1em</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-small">
|
|
|
+ <i class="mdi mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td rowspan="2">
|
|
|
+ <code>icon</code>
|
|
|
+ </td>
|
|
|
+ <td rowspan="2">
|
|
|
+ <code>1.5rem x 1.5rem</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-18px</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>18px</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-18px mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-24px</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>24px</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-24px mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td rowspan="4">
|
|
|
+ <code>icon is-medium</code>
|
|
|
+ </td>
|
|
|
+ <td rowspan="4">
|
|
|
+ <code>2rem x 2rem</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>1em</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-medium">
|
|
|
+ <i class="mdi mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-18px</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>18px</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-medium">
|
|
|
+ <i class="mdi mdi-18px mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-24px</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>24px</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-medium">
|
|
|
+ <i class="mdi mdi-24px mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-36px</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>36px</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-medium">
|
|
|
+ <i class="mdi mdi-36px mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td rowspan="5">
|
|
|
+ <code>icon is-large</code>
|
|
|
+ </td>
|
|
|
+ <td rowspan="5">
|
|
|
+ <code>3rem x 3rem</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>1em</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-large">
|
|
|
+ <i class="mdi mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-18px</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>18px</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-large">
|
|
|
+ <i class="mdi mdi-18px mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-24px</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>24px</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-large">
|
|
|
+ <i class="mdi mdi-24px mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-36px</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>36px</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-large">
|
|
|
+ <i class="mdi mdi-36px mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-48px</code>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>48px</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon is-large">
|
|
|
+ <i class="mdi mdi-48px mdi-bell"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <p>
|
|
|
+ MDI also provides modifier classes for:
|
|
|
+ </p>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ light and dark icons
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ rotated & flipped icons
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table class="table is-bordered">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Type</th>
|
|
|
+ <th>Material Design Icon class</th>
|
|
|
+ <th>Result</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ Light color
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-light</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-signal-4g mdi-light"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ Dark color
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-dark</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-signal-4g mdi-dark"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ Light inactive color
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-light mdi-inactive</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-signal-4g mdi-light mdi-inactive"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ Dark inactive color
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-dark mdi-inactive</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-signal-4g mdi-dark mdi-inactive"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ Flipped
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-flip-h</code>
|
|
|
+ <br>
|
|
|
+ <code>mdi mdi-flip-v</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-signal-4g mdi-flip-h"></i>
|
|
|
+ </span>
|
|
|
+ <br>
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-signal-4g mdi-flip-v"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ Rotated
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <code>mdi mdi-rotate-45</code>
|
|
|
+ <br>
|
|
|
+ <code>mdi mdi-rotate-90</code>
|
|
|
+ <br>
|
|
|
+ <code>mdi mdi-rotate-180</code>
|
|
|
+ </td>
|
|
|
+ <td class="bd-icon-size">
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-signal-4g mdi-rotate-45"></i>
|
|
|
+ </span>
|
|
|
+ <br>
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-signal-4g mdi-rotate-90"></i>
|
|
|
+ </span>
|
|
|
+ <br>
|
|
|
+ <span class="icon">
|
|
|
+ <i class="mdi mdi-signal-4g mdi-rotate-180"></i>
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
{% include variables.html %}
|
|
|
|
|
|
</div>
|
Jeremy Thomas