Html 将图标添加到jumbotron中的标题项

我有以下jumbotron：

通过以下方式创建：

<div class="col-sm-2">
      <div class="jumbotron jumbotron-fluid top-space">
        <div class="container">
            <h1 class="display-6">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">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>

我想要一个红场上的图标。如何将其添加并与我的h1，display-6对齐？

.col-sm-2>div:第一个子项.display-6:：之后{ 内容：； 宽度：40px； 高度：40px； 背景色：红色； 显示：块； 左边距：20px； } .col-sm-2>div:第一个子项.display-6{ 显示：内联flex； } 主动性 另一个好东西

消息

我们的搜索工具。一见钟情，一见钟情，一见钟情，一见钟情，一见钟情

---

有什么问题？你用的是什么图标？只需添加图标，它就会对齐：