Hallo teman - teman bertemu lagi dengan saya, masih di dalam tutorial Dumet school kali ini saya akan membahas tenatang Cara Memberikan Efek Hover Pada Icon Font-awesome. Teman – teman sudah pasti sering melihat sebuah icon dengan bayak jenis dan bentuknya dan ketika kita klik kanan mau kita tampilkan View image maka tools View image tidak akan tampil karena dia bukan image melainkan dia berupa font yang berbentuk icon.sebelum kita melangkah kepembahasan kita, di sini saya akan membahas sedikit apa itu font-awesome, Font awesome adalah font yang dirancang untuk digunakan dengan elemen inline. <I> dan <span> elemen yang banyak digunakan untuk ikon, tujuannya untuk mempercantik tampilan sebuah website atau untuk kepentingan yang lainnya. Jadi kita tidak perlu bersusah payah membuatnya lagi dengan photoshop atau software yang lainnya. Tentu font-awesome tidak akan memberatkan tampilan website kita tidak seperti sebuah gambar yang bisa memberatkan tampilan sebuah website kita ketika sih user membuka website teman – teman.
Oke teman – teman kita sekarang akan masuk pada pembahasan kita yaitu Cara Memberikan Efek Hover Pada Icon Font-awesome, caranya cukup mudah, silah teman – teman download dulu font-awesomenya di website resmi font awesome disini:http://fontawesome.io/ kalau sudah silahkan teman – teman ekstract lalu simpan dalam folder project teman – teman. sekarang silahkan teman – teman ikuti langkah dibawah ini;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-car"></i> <i class="fa fa-car" style="font-size:48px;"></i> <i class="fa fa-car" style="font-size:60px;color:red;"></i> </body> </html> |
Jangan lupa teman – teman harus me-load file font-awesomenya ke dalam HTML kita diantara tag <head> dan </head> seperti gambar dibawah ini
kalau sudah save dan jalankan pada browsernya maka hasilnya akan seperti di bawah ini;
Sekarang kita akan memberikan efek hover pada icon mobil, teman – teman silahkan ikuti langkah – langkah berikut ini;
Oke teman – teman letakkan style di atas diantara tag <head> dan </head>, kalau sudah save dan jalankan. maka hasilnya akan seperti dibawah ini;
dari icon di atas ketika kursor berada di atas icon mobil maka icon mobil akan mempunyai efek background berwarna pink. cukup mudah bukan teman – teman. oke itulah tadi pembahasan saya tentang Cara Memberikan Efek Hover Pada Icon Font-awesome semoga bermanfaat.