Fix #395, Fix #735, Fix #930

CHANGELOG.md

@@ -11,6 +11,9 @@
 
 ### Issues closed
 
+* #930 Remove `vertical-align: top` for icons
+* #735 Font awesome custom `font-size`
+* #395 Font awesome stacked icons
 * #1152 Level-items not centered horizontally on mobile
 * #1147 Add `text-size-adjust: 100%` to `html`
 * #1106 `pagination` docs

docs/.gitignore

@@ -12,6 +12,6 @@ npm-debug.log
 # Folders
 .sass-cache
 /bulma
-/fontawesome
+/icons
 /styles/node_modules
 _site

docs/_config.yml

@@ -10,6 +10,7 @@ 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']
 
 # Variables

docs/_includes/head.html

@@ -7,6 +7,9 @@
   <title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}{% endif %}</title>
 
   <link rel="stylesheet" href="{{ site.fontawesome }}">
+  {% if page.mdi %}
+    <link rel="stylesheet" href="{{ site.mdi }}">
+  {% endif %}
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

docs/_includes/navbar.html

@@ -6,13 +6,13 @@
 
     <a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
       <span class="icon" style="color: #333;">
-        <i class="fa fa-github"></i>
+        <i class="fa fa-lg fa-github"></i>
       </span>
     </a>
 
     <a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
       <span class="icon" style="color: #55acee;">
-        <i class="fa fa-twitter"></i>
+        <i class="fa fa-lg fa-twitter"></i>
       </span>
     </a>
 
@@ -154,12 +154,12 @@
     <div class="navbar-end">
       <a class="navbar-item is-hidden-desktop-only" href="{{ site.github }}" target="_blank">
         <span class="icon" style="color: #333;">
-          <i class="fa fa-github"></i>
+          <i class="fa fa-lg fa-github"></i>
         </span>
       </a>
       <a class="navbar-item is-hidden-desktop-only" href="{{ site.twitter }}" target="_blank">
         <span class="icon" style="color: #55acee;">
-          <i class="fa fa-twitter"></i>
+          <i class="fa fa-lg fa-twitter"></i>
         </span>
       </a>
       <div class="navbar-item">

docs/_sass/specific.sass

@@ -152,3 +152,6 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
     &.is-#{$name}
       background-color: $color
       color: $color-invert
+
+.bd-icon-size .icon
+  background-color: $yellow

docs/documentation/elements/icon.html

@@ -1,5 +1,6 @@
 ---
 title: Icon
+mdi: true
 layout: documentation
 doc-tab: elements
 doc-subtab: icon
@@ -21,13 +22,31 @@ variables:
 </span>
 {% endcapture %}
 
+{% capture icon_sizes_example %}
+<span class="icon">
+  <i class="fa fa-camera-retro fa-lg"></i>
+</span>
+<span class="icon">
+  <i class="fa fa-camera-retro fa-2x"></i>
+</span>
+<span class="icon">
+  <i class="fa fa-camera-retro fa-3x"></i>
+</span>
+<span class="icon">
+  <i class="fa fa-camera-retro fa-4x"></i>
+</span>
+<span class="icon">
+  <i class="fa fa-camera-retro fa-5x"></i>
+</span>
+{% endcapture %}
+
 {% include subnav-elements.html %}
 
 <section class="section">
   <div class="container">
     <h1 class="title">Icons</h1>
     <h2 class="subtitle">
-      Bulma is compatible with <strong><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></strong> icons.
+      Bulma is compatible with <strong>most icon libraries</strong>: <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, etc.
     </h2>
     {%
       include meta.html
@@ -42,51 +61,333 @@ variables:
       <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>
     </div>
 
-    {% include snippet.html content=icon_example %}
+    <div class="block bd-icon-size">
+      {% include snippet.html content=icon_example %}
+    </div>
+
+    <div class="message is-info">
+      <div class="message-body">
+        The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
+      </div>
+    </div>
+
 
     <div class="content">
-      <p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
+      <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>
     </div>
 
     {% include anchor.html name="Sizes" %}
 
     <div class="content">
-      <p>Font Awesome icons use a font-size of <strong>28px</strong> by default, and are best rendered when using <strong>multiples of 7</strong>.</p>
-      <p>The Bulma <code>icon</code> container is always slightly bigger than the font-size used:</p>
+      <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>.
+      </p>
     </div>
 
-    <table class="table">
+    <table class="table is-bordered">
       <thead>
         <tr>
-          <th colspan="2">Class</th>
-          <th>Font-size</th>
+          <th>Container class</th>
           <th>Container size</th>
+          <th>Font Awesome 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>fa</code>
+          </td>
+          <td>
+            <code>1em</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon is-small">
+              <i class="fa fa-home"></i>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>icon</code>
+          </td>
+          <td>
+            <code>1.5rem x 1.5rem</code>
+          </td>
+          <td>
+            <code>fa</code>
+          </td>
+          <td>
+            <code>1em</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon">
+              <i class="fa fa-home"></i>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td rowspan="3">
+            <code>icon is-medium</code>
+          </td>
+          <td rowspan="3">
+            <code>2rem x 2rem</code>
+          </td>
+          <td>
+            <code>fa</code>
+          </td>
+          <td>
+            <code>1em</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon is-medium">
+              <i class="fa fa-home"></i>
+            </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 is-medium">
+              <i class="fa fa-lg fa-home"></i>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>fa fa-2x</code>
+          </td>
+          <td>
+            <code>2em</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon is-medium">
+              <i class="fa fa-2x fa-home"></i>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td rowspan="4">
+            <code>icon is-large</code>
+          </td>
+          <td rowspan="4">
+            <code>3rem x 3rem</code>
+          </td>
+          <td>
+            <code>fa</code>
+          </td>
+          <td>
+            <code>1em</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon is-large">
+              <i class="fa fa-home"></i>
+            </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 is-large">
+              <i class="fa fa-lg fa-home"></i>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>fa fa-2x</code>
+          </td>
+          <td>
+            <code>2em</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon is-large">
+              <i class="fa fa-2x fa-home"></i>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>fa fa-3x</code>
+          </td>
+          <td>
+            <code>3em</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon is-large">
+              <i class="fa fa-3x fa-home"></i>
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    {% include anchor.html name="Icon variations" %}
+
+    <div class="content">
+      <p>
+        Font Awesome also provides modifier classes for:
+      </p>
+      <ul>
+        <li>
+          fixed width icons
+        </li>
+        <li>
+          bordered icons
+        </li>
+        <li>
+          animated icons
+        </li>
+        <li>
+          rotated &amp; flipped icons
+        </li>
+        <li>
+          stacked icons
+        </li>
+      </ul>
+    </div>
+
+    <table class="table is-bordered">
+      <thead>
+        <tr>
+          <th>Type</th>
+          <th>Font Awesome class</th>
+          <th>Result</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td><code>icon is-small</code></td>
-          <td><span class="icon is-small"><i class="fa fa-home"></i></span></td>
-          <td>14px</td>
-          <td>1rem x 1rem</td>
+          <td>
+            Fixed width
+          </td>
+          <td>
+            <code>fa fa-fw</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon">
+              <i class="fa fa-home fa-fw"></i>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Bordered
+          </td>
+          <td>
+            <code>fa fa-border</code>
+          </td>
+          <td>
+            <span class="icon">
+              <i class="fa fa-home fa-border"></i>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Animated
+          </td>
+          <td>
+            <code>fa fa-refresh fa-spin</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon">
+              <i class="fa fa-refresh fa-spin"></i>
+            </span>
+          </td>
         </tr>
         <tr>
-          <td><code>icon</code></td>
-          <td><span class="icon"><i class="fa fa-home"></i></span></td>
-          <td>21px</td>
-          <td>1.5rem x 1.5rem</td>
+          <td>
+            Rotated &amp; flipped
+          </td>
+          <td>
+            <code>fa fa-shield</code><br>
+            <code>fa fa-shield fa-rotate-90</code><br>
+            <code>fa fa-shield fa-rotate-180</code><br>
+            <code>fa fa-shield fa-rotate-270</code><br>
+            <code>fa fa-shield fa-flip-horizontal</code><br>
+            <code>fa fa-shield fa-flip-vertical</code>
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon">
+              <i class="fa fa-shield"></i>
+            </span>
+            <br>
+            <span class="icon">
+              <i class="fa fa-shield fa-rotate-90"></i>
+            </span>
+            <br>
+            <span class="icon">
+              <i class="fa fa-shield fa-rotate-180"></i>
+            </span>
+            <br>
+            <span class="icon">
+              <i class="fa fa-shield fa-rotate-270"></i>
+            </span>
+            <br>
+            <span class="icon">
+              <i class="fa fa-shield fa-flip-horizontal"></i>
+            </span>
+            <br>
+            <span class="icon">
+              <i class="fa fa-shield fa-flip-vertical"></i>
+            </span>
+          </td>
         </tr>
         <tr>
-          <td><code>icon is-medium</code></td>
-          <td><span class="icon is-medium"><i class="fa fa-home"></i></span></td>
-          <td>28px</td>
-          <td>2rem x 2rem</td>
+          <td rowspan="2">
+            Stacked
+          </td>
+          <td>
+            {% highlight html %}<span class="icon is-medium">
+  <span class="fa-stack">
+    <i class="fa fa-circle fa-stack-2x"></i>
+    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
+  </span>
+</span>{% endhighlight %}
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon is-medium">
+              <span class="fa-stack">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
+              </span>
+            </span>
+          </td>
         </tr>
         <tr>
-          <td><code>icon is-large</code></td>
-          <td><span class="icon is-large"><i class="fa fa-home"></i></span></td>
-          <td>42px</td>
-          <td>3rem x 3rem</td>
+          <td>
+            {% highlight html %}<span class="icon is-large">
+  <span class="fa-stack fa-lg">
+    <i class="fa fa-camera fa-stack-1x"></i>
+    <i class="fa fa-ban fa-stack-2x has-text-danger"></i>
+  </span>
+</span>{% endhighlight %}
+          </td>
+          <td class="bd-icon-size">
+            <span class="icon is-large">
+              <span class="fa-stack fa-lg">
+                <i class="fa fa-camera fa-stack-1x"></i>
+                <i class="fa fa-ban fa-stack-2x has-text-danger"></i>
+              </span>
+            </span>
+          </td>
         </tr>
       </tbody>
     </table>

sass/components/navbar.sass

@@ -58,7 +58,7 @@ $navbar-divider-background-color: $border !default
             border-color: $color-invert
         .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
         .navbar-dropdown .navbar-item:not(a)
-          color: $navbar-item
+          color: $color
         .navbar-item.has-dropdown:hover .navbar-link,
         .navbar-item.has-dropdown.is-active .navbar-link
           background-color: darken($color, 2.5%)

sass/elements/icon.sass

@@ -9,21 +9,13 @@ $icon-dimensions-large: 3rem !default
   justify-content: center
   height: $icon-dimensions
   width: $icon-dimensions
-  .fa
-    font-size: 21px
   // Sizes
   &.is-small
     height: $icon-dimensions-small
     width: $icon-dimensions-small
-    .fa
-      font-size: 14px
   &.is-medium
     height: $icon-dimensions-medium
     width: $icon-dimensions-medium
-    .fa
-      font-size: 28px
   &.is-large
     height: $icon-dimensions-large
     width: $icon-dimensions-large
-    .fa
-      font-size: 42px

sass/elements/other.sass

@@ -4,11 +4,6 @@
 .delete
   +delete
 
-.fa
-  font-size: 21px
-  text-align: center
-  vertical-align: top
-
 .heading
   display: block
   font-size: 11px