html - 如何在 fontawesome 方形图标内显示文本消息

Question

这是我的代码。如何在大小为 1x 的方形框中显示文本消息。

<span class="fa-stack fa-5x" style="margin-left:5%">
 <i class="fa fa-square-o fa-stack-2x"></i>   
</span>

Answer 1

根据您创建的放置文本的 div 标签的要求放置绝对位置并放置边距。

<div style="position: absolute;">asdasdaddas</div>

Answer 2

让 Font Awesome 类来完成这项工作。将您的文本包装在fa-stack-1x类中，它会将其定位并居中在图标上。如果需要，您可以从那里使用字体大小。

<span class="fa-stack fa-5x fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <span class="fa fa-stack-1x">Aa</span>
</span>

http://jsbin.com/pisadulufo/1/edit?html,css,输出