Praktik Pseudo Element Font Awesome 6

Pseudo ::before / ::after

Postingan terkait:

Daftar isi:

1. Intro
2. Praktik
3. CSS
4. CSS Variabel

Intro

Pseudo Element yang paling sering digunakan adalah ::before dan ::after, menggunakan double colon
Ada juga yang hanya menuliskan seperti ini :before / :after hanya menggunakan single colon atau satu colon. Sebenarnya secara fungsional keduanya sama fungsi tapi menurut riset saya, double colon memberikan efek lebih kuat alias bisa menimpa kode perintah CSS yang diterapkan pada single colon.

Dibawah ini bentuk dasar kode penggunaan pseudo element, sesuai dokumentasi aslinya Font Awesome menggunakan double colon.

selector::pseudo-element {
  property: value;
}

Penjelasan :
1. Selector : Adalah jenis elemen atau tag HTML yang dipilih / select.
2. Pseudo element : before / sebelum elemen atau after / sesudah elemen.
3. Property : Menentukan bagian dari elemen, disini kita gunakan content.
4. Value : Menentukan isi dari content.

Sekarang kita akan menerapkan penggunaan pseudo element tersebut dengan content - value berupa ikon dari Font Awesome 6

Dikarenakan ada sedikit perbedaan metode penerapan dari CSS dengan versi-versi sebelumnya yaitu versi 4 dan 5.

Untuk versi sebelumnya, setelah menyisipkan script-nya, ikon yang digunakan bisa langsung dirender dan muncul. Terutama untuk penggunaan melalui pseudo element dengan CSS seperti ini:

.selector::before {
content:'\e123';
Font-family: Font Awesome 5 Free;
font-weight: 900;
}

Praktik CSS Pseudo Element versi 6

Contoh :

Tampilan menggunakan ikon type : Brands

• Blogger
• Chrome
• Codepen
• CSS 3

Susunan HTML untuk penyematan ikon Brands

<ul class="pseudo brands">
<li class="iconList"><span class="blogger">Blogger</span></li>
<li class="iconList"><span class="chrome">Chrome</span></li>
<li class="iconList"><span class="codepen">Codepen</span></li>
<li class="iconList"><span class="css">CSS 3</span></li>
</ul>

Tampilan menggunakan ikon type : Solid

• Bars
• Archive
• Laptop
• Setting

Susunan HTML untuk menyematkan ikon Solid

<ul class="pseudo solid">
<li class="iconList"><span class="bars">Bars</span></li>
<li class="iconList"><span class="arsip">Archive</span></li>
<li class="iconList"><span class="laptop">Laptop</span></li>
<li class="iconList"><span class="gear">Setting</span></li>
</ul>

CSS

Css yang digunakan pada tampilan diatas :

/*--- class='iconList' untuk tag <li>---*/
li.iconList{
  padding:4px 8px;
  display:inline-block;
  margin:2px 4px;
  text-shadow: 0 1px 2px #757575;
  font-size:18px;
  font-weight:600
}

/*--- selector::pseudo element ---*/

.blogger::before{content:'\f37c';}
.chrome::before{content:'\f268';}
.codepen::before{content:'\f1cb';}
.css::before{content:'\f13c';}
.bars::before{content:'\f0c9';}
.arsip::before{content:'\f187';}
.laptop::before{content:'\f5fc';}
.gear::before{content:'\f085';}

/*--- CSS ikon Font Awesome 6 yang membedakan dengan versi sebelumnya ---*/

.solid ::before{font:var(--fa-font-solid);}
.brands ::before{font:var(--fa-font-brands);}
.brands ::before,.solid ::before{
  display:inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;

/*--- CSS custom untuk style tambahan ---*/

  margin-right: 4px;
  font-size: 25px;
  text-shadow: 0 1px 2px #757575;
}

CSS variable (--fa-font-..)