如何在HTML和CSS的段落標題上方顯示堆疊的字體超棒圖標？

在下圖中，有文字顯示爲「堆疊的字體 - 真棒圖標」。這是我想顯示堆疊字體的圖標的地方。具體來說，我想在方形輪廓內顯示一個字體真棒圖標（即字體真棒圖標），並且可以根據需要調整它的大小。堆疊的圖標是我網站上的一個部分，將顯示在標題上方。如何在HTML和CSS的段落標題上方顯示堆疊的字體超棒圖標？

預期的結果：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

來源

2016-12-01 Alt-Rock Ninja

這是你在找什麼？

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/

來源

2016-12-02 01:12:43 Beno

感謝您的答覆比諾。我沒有得到我想要的結果。該圖標沒有出現在標題上方。請看截圖。我使用內容管理系統。即Joomla [link] https://s11.postimg.org/5h7qo94b7/homepage.jpg） –

如果沒有看到所有的代碼，很難弄明白。你可以在jsfiddle中重現問題嗎？ – Beno

我無法重複在jsfiddle上多次嘗試的問題，但問題仍然存在於我的網站上。請參閱jsfiddle。 [鏈接] https://jsfiddle.net/n3fnLz9d/9/） –

如何在HTML和CSS的段落標題上方顯示堆疊的字體超棒圖標？

回答

相關問題