Ditulis oleh: Ditulis pada: 11/23/2014
Membuat Rata Sisi List Yang Pakai Font Awesome - Seperti kita ketahui bahwa setiap ikon pada font awesome memiliki lebar yang tidak sama. Hal ini akan terlihat jelas ketika ikon font awesome digunakan pada sebuah list seperti pada menu vertical, atau sub menu, dan lain-lain.
List yang menggunakan font awesome akan memiliki sisi yang tidak rata karena pengaruh lebar ikon yang tidak sama. Tentunya hal ini akan membuat list terlihat tidak rapih dan kurang enak dipandang mata.
Untuk itu sebenarnya font awesome sudah memberikan solusi untuk mengatasi ini, namun sepertinya masih banyak yang kurang memperhatikan hal tersebut. Sebagai contoh perhatikan list di bawah ini.
<div class="list-group">
<span><i class="fa fa-home"></i> Home</span>
<span><i class="fa fa-book"></i> Library</span>
<span><i class="fa fa-pencil"></i> Applications</span>
<span><i class="fa fa-cog"></i> Settings</span>
<span><i class="fa fa-cc-paypal"></i> Payment</span>
</div>
Pada contoh di atas terlihat bahwa sisi kiri list tidak rata. Agar list di atas menjadi rata kiri, maka kita gunakan kode
fa-fw pada setiap ikon font awesome-nya menjadi seperti di bawah ini.
<div class="list-group">
<span><i class="fa fa-home fa-fw"></i> Home</span>
<span><i class="fa fa-book fa-fw"></i> Library</span>
<span><i class="fa fa-pencil fa-fw"></i> Applications</span>
<span><i class="fa fa-cog fa-fw"></i> Settings</span>
<span><i class="fa fa-cc-paypal fa-fw"></i> Payment</span>
</div>Sehingga list-nya akan menjadi seperti di bawah ini.
Menjadi lebih rapih bukan? Semoga postingan ini bermanfaat bagi kita semua, happy blogging...
Untuk lebih jelas, bisa Anda simak langsung di halamannya.
Fixed Width Icons: http://fortawesome.github.io/Font-Awesome/examples/#fixed-width