在jumbotron中将图标添加到标题项

Question

我有一台巨型加速器：

​

​

创建方式：

<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中并将其对齐？

Answer 1

​

.col-sm-2 > div:first-child .display-6::after{
  content: "" ;
  width: 40px;
  height: 40px;
  background-color: red;
  display: block;
  margin-left: 20px;
}
.col-sm-2 > div:first-child .display-6{
 display: inline-flex;   
}

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

​