title: Bulma and Fontawesome: How to align icons vertically and horizontally?
body: <p>I've recently started to experiment with Bulma and Fontawesome, and I found tricky to align the icons vertically and horizontally. My situation is the following.</p>
  
  <ol>
  <li>I downloaded Bulma via npm: <code>npm i bulma --save-dev</code>;</li>
  <li>I imported the relevant Fontawesome file as per the <a href="https://bulma.io/documentation/overview/start/" rel="nofollow noreferrer">Bulma Docs</a>: <code>&lt;script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"&gt;&lt;/script&gt;</code>;</li>
  <li>Created a basic input element field with an icon on the left and another on the right: </li>
  </ol>
  
  <blockquote>
  <pre><code>&lt;div class="control has-icons-left has-icons-right"&gt;
      &lt;input class="input" type="text"&gt;
      &lt;span class="icon is-small is-left"&gt;
          &lt;i class="fas fa-map-pin"&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;span class="icon is-small is-right"&gt;
          &lt;i class="fas fa-check"&gt;&lt;/i&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p>That resulted in the icons to be weirdly aligned to the top-left corner of their respective positions. I tried to center them by appending a <code>has-text-centered</code> class to the span element but that didn't work. Any workaround?</p>