Cara Memasang Dan Menggunakan Icon Font Awesome Di Web

Zona Internetku No Comment June 16, 2019

Situs Font Awesome

Buat kalian para developer web pasti merasa kerepotan saat menambahkan background dan icon dalam website untuk mempercantik dan memperjelas navigasi website.
Namun sekarang kalian tidak usah khawatirkan itu karena kita dapat memanfaatkan fitur framework CSS yang bernama Font Awesome, dengan fitur ini kita dapat dengan mudah dan singkat membuat berbagai macam ikon tanpa harus membuat desain.

Cara Memasang Font Awesome Di Blog

Ini adalah langkah langkah untuk memasang Font Awesome di blog kalian, jika kalian tidak memasang ini maka icon dari font awesome tersebut tidak akan muncul.

1. Masuk ke dalam blog kalian dan pilih menu "Tema" kemudian klik "Edit HTML"
2. Selanjutnya kalian cari tag </head>
3. Setelah itu Copy kode dibawah ini dan Paste di atas tag </head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"/>

4. Jika sudah selesai klik "Simpan Perubahan"

Baca juga :
Cara Membuat Table Of Content Di Postingan Blogger
Membuat Layout Web Responsive Menggunakan Media Query
Membuat Layout Website Sederhana Dengan HTML Dan CSS

Cara Menggunakan Font Awesome Untuk Membuat Icon

Untuk cara menggunakan icon tersebut juga sangat mudah karena kita cukup memanggilnya menggunakan tag <i> dan atribut class yang bernama "fa" font awesome.

Contoh

<i class="fa fa-flag"></i>

Hasilnya

Pengertian
1. Tag <i> berfungsi untuk membuat objek pada element html

2. Nama kelas "fa" berfungsi untuk mendifinisikan bahwa nama kelas font awesome
Jika kalian menggunakan versi pro kalian bisa menggunakan semua jenis style font awesome ini
"fa" sama seperti "fas" yang berarti font awesome dengan gaya solid
"far" font awesome dengan gaya regular (garis tepi)
"fal" font awesome dengan gaya light, mirip seperti regular namun lebih garis tepinya lebih tipis

3. Nama kelas "fa-flag" yaitu nama ikon yang akan digunakan untuk menampilkan ikon pada web. Untuk melihat lebih banyak nama ikon dan kodenya bisa kalian lihat disini Kumpulan Icon Font Awesome

Cara Mengubah ukuran Icon

Ternyata ikon yang kita buat menggunakan font awesome juga bisa diubah ukurannya sesuai dengan kebutuhan kita, contohnya adalah fa-lg (33% lebih besar), fa-2x dan fa-3x

<i class="fa fa-flag fa-3x"></i>

Hasilnya

Cara Merubah Warna Icon

Pada dasarnya warna ikon font awesome ditentukan oleh style bawaan web tersebut, namun kita juga bisa melakukan kostumisasi sehingga kita juga bisa mengubah warna ikon tersebut sesuai dengan keinginan kita

<i class="fa fa-flag" style="color:red"></i>

Hasilnya

Cara Membuat List Dengan Icon

Untuk membuat list dengan ikon font awesome caranya sangat mudah sekali, coba perhatikan kode di bawah ini

<ul class="fa-ul">
<li><i class="fa fa-li fa-tag"></i> Labels</li>
<li><i class="fa fa-li fa-check-square"></i> Labels</li>
<li><i class="fa fa-li fa-list"></i> List</li>
</ul>

Hasilnya

List item
List item
List item

Cara Memutar Icon

Gunakan nama kelas "fa-rotate" dan "fa-flip" untuk memutar icon

Contoh

<i class="fa fa-dove"></i> normal
<i class="fa fa-dove fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-dove fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-dove fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-dove fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-dove fa-flip-vertical"></i> fa-flip-vertical

Hasilnya
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

Menggabungkan Beberapa Icon

Kita juga dapat menggabungkan beberapa ikon font awesome sehingga kita bisa menciptakan ikon yang baru dari hasil penggabungan ikon tersebut.

Untuk menggabungkan beberapa ikon font awesome menjadi satu maka kita harus menambahkan tag <span> dengan atribut class yang bernama "fa-stack"

Contoh

<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x"></i>
</span>

Hasilnya akan menjadi seperti ini

Kalian juga bisa bereksperimen sendiri dengan kreatifitas kalian dalam membuat ikon baru

Perhatian
Ikon yang yang dibuat duluan adalah ikon yang akan menjadi dasar atau background ikon yang baru
untuk fa-stack-2x adalah nama kelas untuk ukuran ikon, sama seperti fa-lg, fa-2x dan fa-3x

Menambahkan Efek Animasi Pada Icon

Untuk memberikan efek animasi pada icon yang telah kita pasang di web, kita dapat menggunakan kelas "fa-spin" ataupun "fa-pulse"

Contoh

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-pulse fa-3x fa-fw"></i>

Hasilnya

Cara Mengkustomisasi Icon Font Awesome

Untuk melakukan kustomisasi sendiri pada ikon font awesome kita bisa mengeditnya seperti kode css biasanya

<style>.fa-heart{font-size:20px;color:red;}
.fa-heart:hover{color:blue;}</style>

<i class="fa fa-heart"></i>

Hasilnya

Setelah kalian sudah memahami semua fungsi ini saya yakian kalian bisa berkreatifitas sendiri untuk menghasilkan icon pada interface website yang keren.
Demikian pembahasan yang panjang ini akhirnya telah selesai, semoga bermanfaat dan dapat membantu kalian dalam menyusun coding.

Promo Menarik