真棒字体图标不与布尔玛菜单中的文本对齐答案

【问题标题】：Font Awesome Icons do not align with text inside a Bulma menu真棒字体图标不与布尔玛菜单中的文本对齐
【发布时间】：2020-09-12 06:29:32
【问题描述】：

当字体真棒图标添加到 Bulma 导航栏项目时，它们与文本正确对齐。但是，当将相同的图标添加到 Bulma 菜单时，它们会错位。如何在不使用自定义 CSS 的情况下将图标与 Bulma 菜单中的文本正确对齐？

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

【问题讨论】：

图标是 1.25rem，而文本只有 1rem - 使它们的大小相同是一个快速而肮脏的修复。
试过了。让情况变得更糟。
取决于你的意思 - 我对包含菜单文本的 span 进行了手动编辑，使其与图标大小相同，然后它们排成一行。由于该跨度上没有类，因此您必须添加一个或手动为每个类添加一个样式属性。或者使用带有:not() 的规则。
这很接近：.menu-list span:not(.icon){ font-size: 1.25rem; } - 不太熟悉布尔玛（DBZ 之外），或者我会在答案中提出更好的建议。
它仍然有点错位。也不能更改字体大小。

标签： html css font-awesome bulma

【解决方案1】：

结果证明 bulma icon 类与较新的字体真棒版本并不兼容。解决方案是让 fontawesome 类接管。删除 .icon 类并添加 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>

【讨论】：