时间戳

首页 > 解决方案 > Font Awesome 图标与 Bulma 菜单中的文本不对齐

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

问题描述

当字体真棒图标添加到 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>

标签： htmlcssfont-awesomebulma

解决方案

结果证明 bulma图标类与较新的字体真棒版本并不兼容。解决方案是让 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>

推荐阅读