FontAwesome |アイコン同士を縦に並べる方法は？

Question

私は自分のサイトにアイコンを作成するのに素晴らしいフォントを使用しています。

問題は、アイコンの実際のアイコンの内容よりも大きいアイコンがあるため、その余分な高さのためにベースライン上に並んでいないことです。

すべてのアイコンをベースライン上で一番下に並べるようにします。文字がどのようにボトムアライメントされるように。これが機能するためには、アイコンは内容と同じくらいの大きさでなければなりません。

実際のところ、.fa divの内側は、それよりも背が高いはずです。ここに3つの異なる.faアイコンを示す想像があります。それらのうちの1つは、それよりも背が高い。

Chromeからコンテンツをクリッピングする前に、コンテンツボックスが青色で強調表示されています。

アイコンの下部に何らかの理由で余分なスペースがあることにお気づきでしょう。それは実際のものです：強調表示される前。アイコンがきれいにベースラインに座るように私は、このスペースを取り除くことができますどのように

IMAGE EXAMPLE

？私は、高さがあることになっているものを制御することができるように、基本的に私が行っていることは、親コンテナ内の問題のアイコンをラップされhttps://codepen.io/vtsells/pen/oeJKNz

：

Answer 1

このcodepen例を参照してください。この方法でアイコンの高さを制御できるので、境界ボックスがどこに配置されているかを制御できます。アラインメントはこの例ではフレックスボックスを介して行われます。 display:flex; align-items:flex-end //flex-start to align to the top, center to align to the vertical center

HTML：

<div id="container"> 
    <i class="fa fa-trash-o fa-2x"></i> 
    <i class="fa fa-clock-o fa-2x"></i> 
    <div id="wrapper"> 
    <i class="fa fa-check-square-o fa-2x"></i> 
    </div> 
</div> 

CSS：

#container{ 
    background:#888; 
    display:flex; 
    align-items:flex-end; 
    padding:10px; 
} 
#wrapper{ 
    background:#ccc; 
    overflow:hidden; 
    height:29px; 
    width:30px; 
} 
i{ 
    background:#ccc; 
}