Cara menggunakan Font Awesome dengan Benar

Pada tutorial sebelumnya saya sudah memberika daftar Font Awesome lengkap 2019. Nah sekarang saya akan memberikan pengarahan tentang cara menggunkan Font Awesome dengan Benar.

Sebelumnya kita mengenal apa itu font awesome ?

Font awesome adalah toolkit font dan icon berbasis CSS dan LESS. Yang dibuat oleh Dave Gandy untuk digunakan pada Twitter Bootstrap, yang kemudian dimasukkan ke dalam BootstrapCDN.

Dengan menghiasi dengan ikon yang menarik, blog/web juga tetap ringan untuk di-loading pengunjung. Sehingga dalam hal desain web tidak perlu menggunakan gambar – gambar yang berukuran besar untuk menggunakannya atau meng upload gambar ikon karena menurutku kurang praktis.

Font Awesome ini dapat digunakan secara gratis yang memiliki lebih dari 675 ikon pada versi 4.7.0 (untuk versi terbaru silahkan cek situsnya fontawesome), dengan menggunaan font awesome ini pengguna dimudahkan karena apa! Tidak perlu menggunakan javascript dalam penggunaannya, dapat di kontrol menggunakan CSS seperti pewarnaan, ukuran, dan lain – lain, dan ikon font awesome ini bisa terlihar dengan baik pada parangkat apapun tanpa terjadi ikon pecah – pecah maupun blur.

---

Cara Memasang Font Awesome

Untuk menggunakan font awesome cukup memasang link dari file font-awesome.min.css tempatkan diatas kode </head>. Biar lebih cepat tekan CTRL + F ketikkan </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'></link>

Kalau sudah, anda sudah bisa menggunakan berbagai pilihan ikon yang tersedia dalam fitur Font Awesome tersebut. Dan font Awesome ini dapat digunakan untuk versi offlinenya (tanpa koneksi internet) untuk tutorialnya bisa menyusul.

---

Menampilkan Ikon Font Awesome

Di versi sebelumnya font awesome menggunakan tag <span> untuk membungkusnya. Namun pada versi sekarang ini font awesome ingin mempermudah penggunaannya meggunakan tag <li>.

Contoh :

<i class="fa fa-truck"></i> Truck

Hasil :
Truck

Keterangan :

• Fa, Nama kelas/class yang harus ada penggunaan pada ikon font awesome.
• Fa-truck untuk memanggil nama ikon yang akan di panggil. Mungkin yang ingin melihat daftar ikon font awesome klik disini.

---

Mengubah warna Ikon Font Awesome

Tentunya kita ingin ikon kita berwarna, tentunya pihak font awesome sudah mempertimbangkannya dengan mengikuti warna text dari sebuah element.

Contoh :

<i class=”fa fa-tree” style=”color:blue;”></i> Warna Biru
<i class=”fa fa-tree” style=”color:#20c997;”></i> Warna Hijau

Hasil :
Warna Biru
Warna Hijau

---

Mengubah Ukuran Ikon Font Awesome

Ikon mewarisi ukuran font yang memungkinkan mereka untuk mencocokkan teks yang mungkin Anda gunakan dengannya.

Contoh :

<i class=”fa fa-file fa-1x”></i> Ukuran 1x
<i class=”fa fa-file fa-lg”></i> Ukuran lg
<i class=”fa fa-file fa-2x”></i> Ukuran 2x
<i class=”fa fa-file fa-3x”></i> Ukuran 3x
<i class=”fa fa-file fa-4x”></i> Ukuran 4x
<i class=”fa fa-file fa-5x”></i> Ukuran 5x

Hasil :
Ukuran 1x
Ukuran lg
Ukuran 2x
Ukuran 3x
Ukuran 4x
Ukuran 5x

---

Mengubah Rotasi Ikon Font Awesome

Terkadang Anda perlu memutar, membalik, atau mencerminkan ikon agar dapat berfungsi dalam proyek atau desain blog/web Anda.

Contoh :

<i class=”fa fa-bed”></i> Biasa/Default
<i class=”fa fa-bed fa-rotate-90”></i> Rotasi 90
<i class=”fa fa-bed fa-rotate-180”></i> Rotasi 180
<i class=”fa fa-bed fa-rotate-270”></i> Rotasi 270
<i class=”fa fa-bed fa-flip-horizontal”></i> Horizontal
<i class=”fa fa-bed fa-flip-vertical”></i> Vertical

Hasil :
Biasa/Default
Rotasi 90
Rotasi 180
Rotasi 270
Horizontal
Vertical

---

Memberi Animasi Ikon Font Awesome

Perlu ikon pemuatan atau status untuk berputar? Font awesome telah memasukkan beberapa animasi dasar dalam gaya dukungan untuk Anda gunakan. Di sini font awesome memberikan 2 kelas untuk menggerakkan ikon yaitu : fa-spin dan fa-pulse.

Contoh :

Menggunakan Spin
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-superpowers fa-spin"></i>

Menggunakan Pulse
<i class="fa fa-cog fa-pulse"></i>
<i class="fa fa-circle-o-notch fa-pulse"></i>
<i class="fa fa-spinner fa-pulse"></i>
<i class="fa fa-refresh fa-pulse"></i>
<i class="fa fa-superpowers fa-pulse"></i>

Hasil :
Menggunakan Spin


Menggunakan Pulse

---

Membuat Ikon Font Awesome Dalam Daftar

Membangun dari penyejajaran vertikal (urut kebawah) dalam gaya lebar. Untuk penggunaannya sama saja seperti membuat daftar list biasa tapi kita harus menambahkan kelas/class fa-ul pada tag <ul> dan fa-li pada tag <li>. Biar lebih mudah lihat contoh

Contoh :

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="fa fa-check-square"></i></span>List icons</li>
  <li><span class="fa-li"><i class="fa fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fa fa-square"></i></span>in lists</li>
  <li><span class="fa-li"><i class="fa fa-check-square-o"></i></span>in lists</li>
</ul>

Hasil :

• replace bullets
• List icons
• be used to
• in lists
• in lists

---

Memberi Border + Pulled Ikon pada Font Awesome

Gunakan fa-pull-right atau fa-pull-left untuk kutipan ikon artikel. Atau anda bisa memberi border pada ikon anda fa-border.

Contoh :

<div style="text-align: justify;">
<i class="fa fa-arrow-right fa-2x fa-pull-right fa-border"></i>
Interpretasi makna teks dari bahasa sumber untuk menghasilkan teks padanan dalam bahasa sasaran yang mengkomunikasikan pesan serupa. Menurut Oxford, penerjemahan adalah komunikasi pesan dari bahasa sumber ke bahasa sasaran dengan menggunakan teks yang ekuivalen.
</div>

Hasil :

Interpretasi makna teks dari bahasa sumber untuk menghasilkan teks padanan dalam bahasa sasaran yang mengkomunikasikan pesan serupa. Menurut Oxford, penerjemahan adalah komunikasi pesan dari bahasa sumber ke bahasa sasaran dengan menggunakan teks yang ekuivalen.

Contoh Lainnya :

<div style="text-align: justify;">
<i class="fa fa-star fa-2x fa-pull-left fa-spin"></i>
Interpretasi makna teks dari bahasa sumber untuk menghasilkan teks padanan dalam bahasa sasaran yang mengkomunikasikan pesan serupa. Menurut Oxford, penerjemahan adalah komunikasi pesan dari bahasa sumber ke bahasa sasaran dengan menggunakan teks yang ekuivalen.
<i class="fa fa-star fa-2x fa-pull-right fa-spin"></i>
</div>

Hasil :

Interpretasi makna teks dari bahasa sumber untuk menghasilkan teks padanan dalam bahasa sasaran yang mengkomunikasikan pesan serupa. Menurut Oxford, penerjemahan adalah komunikasi pesan dari bahasa sumber ke bahasa sasaran dengan menggunakan teks yang ekuivalen.

---

Membalikkan warna Ikon

Untuk menggunakan cara ini kita bisa menggunakan class fa-inverse.
Contoh :

Menggunakan Inverse
<i class="fa fa-twitter fa-inverse" style="background-color: black;"></i>
<i class="fa fa-youtube fa-inverse" style="background-color: black;"></i>
<i class="fa fa-instagram fa-inverse" style="background-color: black;"></i>
<i class="fa fa-star fa-inverse" style="background-color: black;"></i>

Tidak Menggunakan Inverse
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-star"></i>

Hasil :
Menggunakan Inverse


Tidak Menggunakan Inverse

Catatan :

Karena warna body template saya putih jadi tidak terlihat class fa-inversenya, maka saya tambahkan kode (style="background-color:#000000;")

---

Membuat Ikon Font Awesome Bertumpuk

Anda dapat menumpuk ikon dengan mudah dengan dukungan gaya yang dibundel dengan Font Awesome. Element ini harus menggunakan kelas/class fa-stack.

Contoh :

<span class="fa-stack">
  <i class="fa fa-check fa-stack-1x"></i>
  <i class="fa fa-sticky-note-o fa-stack-2x"></i>
</span>

Hasil :



Anda bisa berkreasi dengan yang lain misalnya :

<span class="fa-stack fa-2x">
  <i class="fa fa-camera fa-stack-1x" style="color: black;"></i>
  <i class="fa fa-ban fa-stack-2x" style="color: red;"></i>
</span>

<span class="fa-stack fa-2x">
  <i class="fa fa-code fa-stack-1x" style="color: black;"></i>
  <i class="fa fa-folder-o fa-stack-2x" style="color: yellow;"></i>
</span>

<span class="fa-stack fa-2x">
  <i class="fa fa-eye fa-stack-1x fa-inverse" style="color: black;"></i>
  <i class="fa fa-ban fa-stack-2x" style="color: red;"></i>
</span><br />

<span class="fa-stack fa-2x">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-smile-o fa-stack-1x fa-inverse fa-spin"></i>
</span>

<span class="fa-stack fa-2x">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-female fa-stack-1x fa-inverse" style="color: pink;"></i>
</span>

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x" style="color: orange;"></i>
  <i class="fa fa-chevron-up fa-stack-1x" style="color: white;"></i>
</span>

Hasil :

Catatan :
Yang paling duluan ditulis akan menjadi yang paling bawah dalam tumpukan ikon.

---

Demikian sudah membaca artikel dari saya yaitu Cara Menggunakan Font Awesome Dengan Benar.
Semoga Bermanfaat! Selamat Mencoba.

Bagikan Artikel

Facebook Twitter Pinterest Whatsapp