HTMLやCSSのセクションタイトルの上に積み重なったフォント - すばらしいアイコンを表示するにはどうすればよいですか？

Question

下の画像には、「積み重ねフォント - すばらしいアイコン」として表示されているテキストがあります。ここでは、積み重ねられたフォントのすばらしいアイコンを表示したいと思っています。具体的には、正方形の輪郭（つまり、すばらしいフォントアイコン）の中にフォントのすばらしいアイコンを表示したいと思っています。積み重なったアイコンは、私のウェブサイト上のセクション用で、タイトルの上に表示されます。

が結果対象：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]: https://i.stack.imgur.com/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：あなたの応答BENOため

.icon { 
    text-align: center; 
} 

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