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

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

Answer 2

テキストを配置する作成したdivタグに、必要に応じて位置を絶対に配置し、マージンを配置します。

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