将图标与导航栏中的文本对齐 Bootstrap 4

Question

我正在尝试将图标放在导航按钮中的文本之前。但是，它总是出现在上面。 此外，图标必须与文本垂直对齐。 这一定很容易纠正，但无法弄清楚。 非常感谢任何反馈。

应该是什么样子：

会发生什么：

.nav-link {
  display: inline-block;
}

<ul class="navbar-nav mx-auto w-100">
      <li class="nav-item">
      <a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
        <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
        <h4>Test 1</h4>
      </a>
    </li>

      <li class="nav-item">
        <a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
          <img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
          <h4>Test 2</h4>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
          <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
          <h4>Test 3</h4>
        </a>
      </li>
</ul>

Answer 1

您需要像这样将class="d-inline" 添加到您的 h4 元素中：

<ul class="navbar-nav mx-auto w-100">
   <li class="nav-item">
       <a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
           <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
           <h4 class="d-inline">Test 1</h4>
       </a>
   </li>

   <li class="nav-item">
       <a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
           <img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
           <h4 class="d-inline">Test 2</h4>
       </a>
   </li>

   <li class="nav-item">
       <a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
           <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
           <h4 class="d-inline">Test 3</h4>
       </a>
   </li>
</ul>

h4s（和h1s 等）通常是块级元素，这就是它们包装的原因。