Membuat Rata Sisi List Yang Pakai Font Awesome

List Yang Pakai Font Awesome
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>
Home Library Applications Settings Payment

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.

Home Library Applications Settings Payment

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

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments