html - 如何在 HTML 和 CSS 中的章节标题上方显示一个堆叠的超赞字体图标？

Question

在下图中，有显示为“stacked font-awesome icon”的文字。这是我想显示堆叠 Font Awesome 图标的地方。具体来说，我想在方形轮廓内显示一个超赞字体图标(即超赞字体图标)，并且能够根据需要调整它的大小。堆叠图标用于我网站上的一个部分，将显示在标题上方。

预期结果:https://postimg.org/image/3mkiestwf/

    <p align="center">One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home.</p>

        <div>
        <div style="float: left; width: 50%;">
        <ul style="float: right;">
            <li><i class="fa fa-check"></i>   List Item 1</li>
            <li><i class="fa fa-check"></i>   List Item 2</li>
            <li><i class="fa fa-check"></i>   List Item 3</li>
        </ul>

        </div>
        <div style="float: right; width: 50%;">
        <ul>
            <li><i class="fa fa-check"></i>   List Item 4</li>
            <li><i class="fa fa-check"></i>   List Item 5</li>
            <li><i class="fa fa-check"></i>   List Item 6</li>
        </ul>
        </div>
        </div>


  [1]: /image/JlxeY.jpg

Answer 1

这是您要找的吗？

HTML:

<div class="icon">
  <span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-rocket fa-stack-1x"></i>
  </span>
</div>
... the rest of your content ...

CSS:

.icon {
  text-align: center;
}

https://jsfiddle.net/n3fnLz9d/11/