Penggunaan Fa-Iconname-Square Dan Fa-Stack Font Awesome

Penggunaan fa-iconname-square Dan fa-stack Font Awesome - Pada Font Awesome terdapat ikon biasa dan ikon yang mempunyai kotak atau pun bulatan (circle). Dengan begitu kita akan gampang menentukan ikon mana yang akan dipakai. 

Jika kita menginginkan ikon dengan kotak atau bulatan, maka kita sanggup menentukan ikon fa-iconname-square atau fa-iconname-circle. Namun Font Awesome juga memperlihatkan pilihan lain dengan sedikit pengaturan sehingga ikon biasa sanggup mempunyai kotak ataupun bulatan.

Dengan memakai class fa-stack, kita sanggup memperlihatkan kotak atau bulatan pada ikon biasa. Dan tentunya hal ini mempunyai perbedaan pada hasil kesannya walaupun tampilannya nyaris sama.

Perbedaannya dari keduanya sanggup kita lihat pada pola 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 pola di atas kita sanggup melihat perbedaannya walaupun hasilnya hampir sama (kita sanggup menciptakan sama pola pertama dengan kedua dengan menambahkan css untuk mengatur letak ikonnya).

Pada pola pertama dengan ikon biasa dengan square, ikonnya transparant sehingga tidak cocok untuk digunakan pada background yang berwarna.

Sedangkan pada pola kedua, kita sanggup memperlihatkan warna pada pada kotak dan ikon sehingga cocok untuk diterapkan pada background yang berwarna.

Dengan mengetahui perbedaan dari keduanya, maka kita sanggup menciptakan ikon dengan Font Awesome yang tepat. Untuk lebih jelasnya ihwal stacked icons sanggup Anda simak eksklusif di halaman Font Awesome di URL di bawah ini.

Stacked Icon: http://fortawesome.github.io/Font-Awesome/examples/#stacked

Sumber https://www.kompiajaib.com/

Share this post