将 FontAwesome 图标与 <h1> 对齐答案

【问题标题】：Align FontAwesome icon to <h1>将 FontAwesome 图标与 <h1> 对齐
【发布时间】：2019-10-16 08:23:21
【问题描述】：

我对学习 Bootstrap 还是很陌生，但是在将我的图标与我的 . 对齐在同一行时遇到了一些问题。

What it looks like right now.. 我一直在尝试在容器中修复它，但也使用行、列和几种对齐方法。这是我现在的代码：

<div class="container">
  <div class="row">
    <div class="col">
    <h1 class="mb-3 ml-5">Products</h1>
    <button class="filterIcon navbar-toggler float-right align-self-start" type="button">
        <i class="fa fa-list"></i>
      </button>
      </div>
  </div>

谁能告诉我我做错了什么？我似乎也无法在文档中找到答案。如果有人确实有文档，请给我看，以便我可以从中学习:)。

谢谢！

【问题讨论】：

标签： html bootstrap-4 icons alignment html-heading

【解决方案1】：

您可以使用 flex 布局让项目并排对齐并垂直居中。对于引导程序，这意味着使用 d-flex 和 align-items-center 类

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<div class="container">
  <div class="row">
    <div class="col d-flex align-items-center">
      <h1 class="m-0" style="flex-grow:1;">Products</h1>
      <button class="filterIcon navbar-toggler" type="button">
        <i class="fa fa-list"></i>
      </button>
    </div>
  </div>

【讨论】：