Блог

Главная - Вопросы по программированию - Значки Font Awesome не совпадают с текстом в меню Bulma

Значки Font Awesome не совпадают с текстом в меню Bulma

#html #css #font-awesome #bulma

#HTML #css #шрифт-awesome #bulma

Вопрос:

Когда значки font awesome добавляются к элементу панели навигации 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>

Комментарии:

1. Размер значков составляет 1,25 rem, тогда как размер текста составляет всего 1rem — быстрое и грязное исправление.

2. Пробовал. Ухудшает ситуацию.

3. Зависит от того, что вы имеете в виду — я вручную отредактировал интервал, содержащий текст меню, чтобы сделать его того же размера, что и значок, и они выровнялись. Поскольку в этом диапазоне нет класса, вам придется добавить один или вручную добавить атрибут стиля к каждому из них. Или используйте правило с :not() .

4. Это приближает его: .menu-list span:not(.icon){ font-size: 1.25rem; } — не совсем знаком с Bulma (то есть за пределами DBZ), или я бы предложил что-то лучшее в ответе.

5. Он все еще немного смещен. Также изменение размера шрифта не является опцией.

Ответ №1:

Получается, что класс icon bulma на самом деле не совместим с более новой версией font awesome. Решение состоит в том, чтобы позволить классам fontawesome взять верх. После удаления.класс значков и добавление 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>