Font Awesome 图标不与 Bulma 菜单中的文本对齐

Question

将超赞字体图标添加到 Bulma 导航栏项目后，它们会与文本正确对齐。但是，将相同的图标添加到 Bulma 菜单时，它们会错位。如何在不使用自定义的情况下正确对齐 Bulma 菜单中的图标和文本 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>

Answer 1

结果是 bulma icon class 与较新的 font awesome 版本并不兼容。解决方案是让 fontawesome classes 接管。删除 .icon class 并添加 fa-fw 后，图标完美对齐。

<!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>

Font Awesome 图标不与 Bulma 菜单中的文本对齐

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

html

css

font-awesome

bulma