フォント恐ろしい積み重ねられた画像

Question

私は例のページhttp://fontawesome.io/examples/

一覧で説明したように、リスト内のフォント恐ろしい積み重ねられた画像を使用しようとしている：

<ul class="fa-ul"> 
    <li><i class="fa-li fa fa-check-square"></i>List icons</li> 
</ul> 

積み上げ画像：

<span class="fa-stack fa-lg"> 
    <i class="fa fa-camera fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span> 

このフィドルでわかるように、画像が正しく整列できません：

https://jsfiddle.net/uqL4aLyj/

正しく整列させる方法を知っている人はいますか？

が

マックス

Answer 1

.fa-stackクラスは、アイコンの積層セットに2emのheight、widthとline-heightが適用されるため、これが起こっています。スタックされていないアイコンをスタックされたアイコンと整列させるための迅速な方法は、スタックされていないアイコンを1つのアイコンのスタックとして扱うことです。

あなたはあなたの現在のマークアップを変更することによって、これを達成することができます

<li> 
    <i class="fa fa-camera-retro"></i> 
    text 
</li> 

へ：

<li> 
    <span class="fa-stack"> 
    <i class="fa fa-camera-retro fa-stack-1x"></i> 
    </span> 
    text 
</li> 

Modified JSFiddle demo。

Answer 2

事前にありがとうございfontawesomeページ上の例では、注文/順不同リストの外に積み重ねられた画像を使用しています。それらを<br>タグで区切ります。

<span class="fa-stack fa-lg"> 
    <i class="fa fa-square-o fa-stack-2x"></i> 
    <i class="fa fa-twitter fa-stack-1x"></i> 
</span> 
First item<br> 
<span class="fa-stack fa-lg"> 
    <i class="fa fa-camera fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span> 
Second item