Font Awesome Icons do not align with text inside a Bulma menu

When font awesome icons are added to a Bulma navbar item, they align correctly to the text. However, when adding the same icon to a Bulma menu, they are misaligned. How do I correctly align icons with text in a Bulma menu without using custom CSS?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Test</title>
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" rel="stylesheet">
  <style>
    *:not(path):not(g) {
      color: hsla(210, 100%, 100%, 0.9) !important;
      background: hsla(210, 100%, 50%, 0.5) !important;
      outline: solid 0.05rem hsla(210, 100%, 100%, 0.5) !important;
      box-shadow: none !important;
    }
  </style>
</head>

<body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span>- Test Correctly Aligned</span></a>
      </div>
    </div>
  </nav>
  <aside class="menu">
    <ul class="menu-list">
      <li><a><span class="icon"><i class="fas fa-book"></i></span><span>- Test Incorrectly aligned</span></a></li>
      <li><a><span class="icon"><i class="fas fa-book"></i></span><span>- Test Incorrectly aligned</span></a></li>
    </ul>
  </aside>
</body>

</html>

Solution

So turns out the bulma icon class isn't really compatible with newer font awesome version. The solution is to let fontawesome classes take over. After removing .icon class and adding fa-fw, the icons align perfectly.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Test</title>
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" rel="stylesheet">
  <style>
    *:not(path):not(g) {
      color: hsla(210, 100%, 100%, 0.9) !important;
      background: hsla(210, 100%, 50%, 0.5) !important;
      outline: solid 0.05rem hsla(210, 100%, 100%, 0.5) !important;
      box-shadow: none !important;
    }
  </style>
</head>

<body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span>- Test Correctly Aligned</span></a>
      </div>
    </div>
  </nav>
  <aside class="menu">
    <ul class="menu-list">
      <li><a><span class="fas fa-book fa-fw"></span><span>- Test Incorrectly aligned</span></a>
      <li><a><span class="fas fa-book fa-fw"></span><span>- Test Incorrectly aligned</span></a>
    </ul>
  </aside>
</body>

</html>