Bulma and Fontawesome: How to align icons vertically and horizontally?

user_9009048 0
Viewed 4692

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.

  1. I downloaded Bulma via npm: npm i bulma --save-dev;
  2. I imported the relevant Fontawesome file as per the Bulma Docs: <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>;
  3. Created a basic input element field with an icon on the left and another on the right: 
<div class="control has-icons-left has-icons-right">
    <input class="input" type="text">
    <span class="icon is-small is-left">
        <i class="fas fa-map-pin"></i>
    </span>
    <span class="icon is-small is-right">
        <i class="fas fa-check"></i>
    </span>
</div>

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 has-text-centered class to the span element but that didn't work. Any workaround?

bulma font-awesome alignment css
2 Answers

I found and applied a working solution just by targeting the span element in my CSS file and by making it a flex-container: 

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
user_90090480

As an alternative, I found the following in the current Bulma documentation:

You can combine an icon with text, using the icon-text wrapper, as long as all text inside is wrapped in its own span element:

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</span>
user_3588730
Related