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

Question

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

应该是什么样的：

会发生什么：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

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