Ditulis oleh: Ditulis pada: 11/19/2014
Penggunaan fa-iconname-square Dan fa-stack Font Awesome - Pada Font Awesome terdapat ikon biasa dan ikon yang memiliki kotak atau pun bulatan (circle). Dengan begitu kita akan mudah menentukan ikon mana yang akan dipakai.
Jika kita menginginkan ikon dengan kotak atau bulatan, maka kita bisa memilih ikon fa-iconname-square atau fa-iconname-circle. Namun Font Awesome juga memberikan pilihan lain dengan sedikit pengaturan sehingga ikon biasa bisa memiliki kotak ataupun bulatan.
Dengan menggunakan class fa-stack, kita bisa memberikan kotak atau bulatan pada ikon biasa. Dan tentunya hal ini memiliki perbedaan pada hasil akhirnya walaupun tampilannya nyaris sama.
Perbedaannya dari keduanya bisa kita lihat pada contoh di bawah ini.
1. Ikon biasa dengan square
<i class="fa fa-facebook-square"></i>
2. Ikon dengan fa-stack
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
Dari kedua contoh di atas kita bisa melihat perbedaannya walaupun hasilnya hampir sama (kita bisa membuat sama contoh pertama dengan kedua dengan menambahkan css untuk mengatur letak ikonnya).
Pada contoh pertama dengan ikon biasa dengan square, ikonnya transparant sehingga tidak cocok untuk digunakan pada background yang berwarna.
Sedangkan pada contoh kedua, kita bisa memberikan warna pada pada kotak dan ikon sehingga cocok untuk diterapkan pada background yang berwarna.
Dengan mengetahui perbedaan dari keduanya, maka kita bisa membuat ikon dengan Font Awesome yang tepat. Untuk lebih jelasnya tentang stacked icons bisa Anda simak langsung di halaman Font Awesome di URL di bawah ini.
Stacked Icon: http://fortawesome.github.io/Font-Awesome/examples/#stacked
Sedangkan pada contoh kedua, kita bisa memberikan warna pada pada kotak dan ikon sehingga cocok untuk diterapkan pada background yang berwarna.
Dengan mengetahui perbedaan dari keduanya, maka kita bisa membuat ikon dengan Font Awesome yang tepat. Untuk lebih jelasnya tentang stacked icons bisa Anda simak langsung di halaman Font Awesome di URL di bawah ini.
Stacked Icon: http://fortawesome.github.io/Font-Awesome/examples/#stacked