Membuat Rata Sisi List Yang Pakai Font Awesome
Membuat Rata Sisi List Yang Pakai Font Awesome - Seperti kita ketahui bahwa setiap ikon pada font awesome mempunyai lebar yang tidak sama. Hal ini akan terlihat terang saat ikon font awesome dipakai pada sebuah list menyerupai pada sajian vertical, atau sub menu, dan lain-lain.
List yang memakai font awesome akan mempunyai sisi yang tidak rata sebab imbas lebar ikon yang tidak sama. Tentunya hal ini akan menciptakan list terlihat tidak rapih dan kurang lezat dipandang mata.
Untuk itu bersama-sama font awesome sudah menawarkan solusi untuk mengatasi ini, namun tampaknya masih banyak yang kurang memperhatikan hal tersebut. Sebagai pola 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 pola di atas terlihat bahwa sisi kiri list tidak rata. Agar list di atas menjadi rata kiri, maka kita gunakan aba-aba
fa-fw pada setiap ikon font awesome-nya menjadi menyerupai 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 menyerupai di bawah ini.
Menjadi lebih rapih bukan? Semoga postingan ini bermanfaat bagi kita semua, happy blogging...
Untuk lebih jelas, dapat Anda simak pribadi di halamannya.
Fixed Width Icons: http://fortawesome.github.io/Font-Awesome/examples/#fixed-width Sumber https://www.kompiajaib.com/
0 Response to "Membuat Rata Sisi List Yang Pakai Font Awesome"
Posting Komentar