Font Awesome sendiri bukanlah satu satunya library icon di dunia ini, ada banyak yang lainya, namun yang paling populer dan paling banyak digunakan adalah Font Awesome Icons. Karena penggunaanya mudah, kita hanya perlu memanggilnya dengan class pada elemen HTML.
Dan kali ini saya akan membagikan caranya untuk memasang sekaligus menggunakan Font Awesome Icons.
Memasang Font Awesome
Ada dua cara yang dapat anda gunakan.Cara I
Cara ini mengharuskan kalian untuk online, karena font awesome icon dalam web didapat dari webnya secara langsung.- Kunjungi halaman ini
- Lalu, salin code yang ada dalam kotak, seperti pada gambar dibawah ini.
-
-
Setelah itu, pastekan code yang disalin tadi ke dalam web anda, tepatnya didalam tag <head>, contoh.
<head>
<link rel="stylesheet" type="text/css" href=""></head>
Cara II
Cara ini, kalian harus mendownload library font awesome icon, kalian tidak harus online untuk menggunakanya.- Kunjungi Link ini.
- Setelah itu, klik link download yang tertera
- Extract berkas yang sudah didownload, kemudian pindahkan ke folder web kalian
- Masukan kode dibawah ini di web kalian
<head>
<link rel="stylesheet" type="text/css" href="font-awesome/css/all.min.css"></head>
Menggunakan Font Awesome
Untuk menggunakan font awesome, caranya sangat mudah, berikut syntaxnya.
<i class="fa fa-namaicon"></i>
Contoh
<i class="fa fa-gavel"></i>
Hasilnya fa-gavel
Anda juga dapat mengubah ukuran ikonnya. Misal kali ini saya akan mengunahnya menjadi 5 kali lebih besar
<i class="fa fa-5x fa-gavel"></i>
Hasilnya fa-5x fa-gavel
Anda juga dapat menambahkan animasi pada icon anda. Yaitu dengan fa-spin.
<i class="fa fa-3x fa-spin fa-gavel"></i>
Hasilnya fa-3x fa-spin fa-gavel
Oke, itulah tulisan singkat dari saya, semoga bermanfaat.
Sekian postingan saya yang berjudul Cara Memasang Dan Menggunakan Font Awesome Icons.
Jangan lupa baca postingan saya sebelumnya Mengenal Animte.CSS Dan Cara Menggunakanya
0 komentar:
Posting Komentar