Using Font Awesome with Bootstrap 4

Question

A Major problem I found while developing with Bootstrap 4 and trying to create a Font Awesome button that when I create a series of buttons, I get different size buttons, the only way to get the same size buttons is to use the same font for each one So the problem is due to Font Awesome sizes is not the same for every one.

      <a class="btn btn-outline-warning" type="button" href="#">
        <i class="fa fa-edit"></i>
      </a>

      <a class="btn btn-outline-danger" type="button" href="#">
        <i class="fa fa-trash"></i>
      </a>

Does one have a practical exemple to get Off this problem ?

Answer 1

While you can certainly manually adjust the font size of your Font Awesome icons, I would suggest a less dramatic approach: .fa-fw. This is a utility class that is part of Font Awesome's stylesheet that helps unify the width of your fonts. Per the 4.7.0 documentation:

Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<a class="btn btn-outline-warning" href="#">
  <i class="fa fa-fw fa-edit"></i>
</a>

<br>

<a class="btn btn-outline-danger" href="#">
  <i class="fa fa-fw fa-trash"></i>
</a>

<br>

<a class="btn btn-outline-success" href="#">
  <i class="fa fa-fw fa-wrench"></i>
</a>

<br>

<a class="btn btn-outline-info" href="#">
  <i class="fa fa-fw fa-stop"></i>
</a>

In the above example you can see how .fa-fw has adjusted your icon spacing and everything looks the same. You might notice though that I did also remove type="button" from your anchor tag as this was resulting in Bootstrap not applying the full CSS of the ban-outline-* you were declaring.