3. Styling Icons Font Awesome 5

Styling Icons Font Awesome 5

oleh Handy Eko Cahyono •   •   Update terakhir : Selasa, Juni 14, 2022.
0

CSS Font Awesome 5


Font Awesome 5
Daftar isi:
  • Font Awesome
  • CSS Sizing (ukuran)
  • CSS Rotating (memutar)
  • CSS Animating (animasi)

    • Selengkapnya tentang Font Awesome, kunjungi postingan sebelumnya :

  • Memasang Font Icon (Font Awesome versi 4.7 & Material Icons)
  • Update Font Awesome 5.1 (Memasang Font Awesome versi 5.1)
  • List icon Font Awesome (versi 4.7) 

    • CSS Font Awesome 5

    Styling - pemberian gaya Style / gaya yang diberikan berikut ini cukup simpel, karena hanya menggunakan penambahan "class" pada elemen objek nya sehingga tanpa penambahan CSS secara terpisah, sudah otomatis terbentuk. Dengan catatan, telah memasang link stylesheet Font Awesome 5 di bagian <head>

    Mengatur ukuran ikon

    Sizing CSS
    Contoh :

    Kode - class :
    <i class="fas fa-lightbulbfa-xs"></i>
    <i class="fas fa-lightbulbfa-sm"></i>
    <i class="fas fa-lightbulbfa-lg"></i>
    <i class="fas fa-lightbulbfa-2x"></i>
    <i class="fas fa-lightbulbfa-3x"></i>
    <i class="fas fa-lightbulbfa-5x"></i>
    <i class="fas fa-lightbulbfa-7x"></i>
    <i class="fas fa-lightbulbfa-10x"></i>
    Kode dengan warna merah adalah class yang menentukan ukuran ikon, mulai dari yang terkecil "fa-xs = 0.75em" sampai yang terbesar "fa-10x = 10em".
    Dan ukuran ini masih dapat disesuaikan dengan cara menentukan ukuran awalnya seperti berikut :
    Contoh :
    Kode - class nya :
    <div style="font-size:10px;">
      <i class="fas fa-lightbulb fa-xs"></i>
      <i class="fas fa-lightbulb fa-sm"></i>
      <i class="fas fa-lightbulb fa-lg"></i>
      <i class="fas fa-lightbulb fa-2x"></i>
      <i class="fas fa-lightbulb fa-3x"></i>
      <i class="fas fa-lightbulb fa-5x"></i>
      <i class="fas fa-lightbulb fa-7x"></i>
      <i class="fas fa-lightbulb fa-10x"></i>
    </div>
    Keterangan : Kode barwarna kuning diatas yang menentukan ukuran awal : 10px pada tiap ikon dan kemudian diperbesar oleh class yang terpasang pada masing-masing icon.

    Memutar ikon

    Rotating CSS
    Contoh :

    Kode - class :
    <div class="fa-4x">
      <i class="fas fa-lightbulb"></i>
      <i class="fas fa-lightbulb fa-rotate-90"></i>
      <i class="fas fa-lightbulb fa-rotate-180"></i>
      <i class="fas fa-lightbulb fa-rotate-270"></i>
      <i class="fas fa-lightbulb fa-flip-horizontal"></i>
      <i class="fas fa-lightbulb fa-flip-vertical"></i>
    </div>
    Kode berwarna kuning adalah class yang menentukan ukuran perputaran mulai 90 derajat hingga 270 derajat, untuk flip tentunya sudah jelas untuk membalik posisi ikon secara horisontal maupun vertikal.

    Membuat animasi ikon.

    Animating CSS
    Contoh :

    Kode - class :
    <div class="fa-3x">
      <i class="fas fa-spinner fa-spin"></i>
      <i class="fas fa-circle-notch fa-spin"></i>
      <i class="fas fa-sync fa-spin"></i>
      <i class="fas fa-cog fa-spin"></i>
      <i class="fas fa-spinner fa-pulse"></i>
      <i class="fas fa-stroopwafel fa-spin"></i>
    </div>
    Untuk menambahkan animasi sudah sangat jelas, tinggal menambahkan class='fa-spin' atau 'fa-pulse' saja maka icon akan terus berputar tanpa henti.
    Animasi ini umumnya digunakan pada jeda waktu tunggu pemuatan halaman seperti ini :
    Kembali ke atas

    Menggabungkan 2 ikon (Masking)

    Contoh :
    Keterangan contoh:
    1. menggabungkan dengan
    2. menggabungkan dengan
    3. menggabungkan dengan

    Kode - class :
    <div class="fa-4x">
    <i class="fas fa-smoking" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background: MistyRose"></i>
    <i class="fab fa-sad-cry" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background: MistyRose"></i>
    <i class="fas fa-smoking-ban" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background: MistyRose"></i>
    </div>
    Keterangan class :
    1. data-fa-transform : untuk mengatur ikon bagian dalam.
    2. data-fa-mask : untuk mengatur ikon bagian luar atau mask (yang ditutup ikon bagian luar)

    Transformasi ikon (Transform)

    Contoh :
    Kode CSS :
    .
    Tags:
    Posting Komentar (0)
    Lebih baru Lebih lama