如何在Jumbotron的h1.display-6标题中添加并对齐图标

要给h1.display-6添加图标并实现完美对齐，我们可以用Font Awesome图标库（最常用的方案）或者自定义图标，结合简单的布局技巧来搞定。下面是具体步骤：

1. 准备图标资源（以Font Awesome为例） #

如果你还没引入Font Awesome，可以在页面的<head>里加这段代码（已引入过就跳过）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

2. 修改HTML代码插入图标 #

把图标元素直接嵌套到h1.display-6内部，放在文字前方即可。这里是修改后的完整代码：

<div class="col-sm-2">
  <div class="jumbotron jumbotron-fluid top-space">
    <div class="container">
      <!-- 新增灯泡图标 -->
      <h1 class="display-6 d-flex align-items-center gap-2">
        <i class="fa-solid fa-lightbulb"></i> Initiatives
      </h1>
      <p class="lead">The other good stuff.</p>
      <ul>
        <li>
          <a href="">Start an Initiative &#187;</a>
        </li>
        <li>
          <a href="">More Information &#187;</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="jumbotron jumbotron-fluid top-space">
    <div class="container">
      <!-- 新增报纸图标 -->
      <h1 class="display-6 d-flex align-items-center gap-2">
        <i class="fa-solid fa-newspaper"></i> News
      </h1>
      <p class="lead">Our Search Tool. <br> Love at first, second, third, fourth, fifth, and sixth sight.</p>
      <a href="">Try it out &#187;</a>
    </div>
  </div>
</div>

3. 实现图标与文字的对齐 #

上面的代码里用了Bootstrap内置类来快速对齐：

• d-flex：将h1转为flex容器，让图标和文字在同一行排列
• align-items-center：让图标与文字垂直居中对齐
• gap-2：给图标和文字之间添加合适间距（可换成gap-1/gap-3调整大小）

如果不想依赖Bootstrap类，也可以自定义CSS：

.display-6 {
  display: flex;
  align-items: center;
  /* 自定义间距，按需修改 */
  gap: 8px; 
}

4. 自定义图标的适配方案 #

如果用自己的本地图标图片，把<i>标签替换成<img>即可，记得设置图片宽高保证比例：

<h1 class="display-6 d-flex align-items-center gap-2">
  <img src="your-icon-path.png" alt="Initiatives icon" style="width: 24px; height: 24px;"> Initiatives
</h1>

对齐逻辑和Font Awesome图标一致，用flex布局就能实现垂直居中。

这样调整后，图标就会精准出现在标题左侧，和文字完美对齐啦！

内容的提问来源于stack exchange，提问作者ProjektWeinheim