FontAwesome berubah / berganti class saat di klik
By Ndi Uke
Font Awesome merupakan font dengan berbagai bentuk icon yang umum digunakan banyak website / blog untuk mempercantik tampilan beranda atau halaman posting mereka termasuk blogsaya juga. berawal pada saat saya sedang mendesain blog sederhana saya dengan target folder-icon, saya kepikiran untuk membuat perubahan pada icon folder tersebut ketika diklik / hover, saya ingin agar icon folder tersebut menjadi icon folder terbuka ketika diklik contoh seperti dua icon berikut dan .
Setelah pencarian sana-sini akhirnya saya menemukan cara yang ternyata caranya cukup mudah hingga saya bisa menyelesaikan tugas tersebut dan berikut adalah hasilnya
Coba klik icon folder ini
Jadi seperti contoh di atas srtikel yang kali ini akan saya bahas. pertama-tama buat kamu yang belum pernah memasang font awesome pastikan dulu script berikut ada di template kamu <link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> Jika belum ada silahkan copy script tersebut lalu pastekan dalam template tepatnya dibawah tag <head>. dengan begitu template blog kamu sudah support / bisa menggunakan FontAwesome.
Seperti yang kita tau bahwa skrip fontAwesom yang biasa kita gunakan dalam postingan memiliki kode html seperti berikut <i class='fa fa-xxx'></i> pada folder icon di atas kode html nya ialah fa-folder dan jika kita menggunakan fa-eye maka akan muncul icon seperti ini lalu fa-facebook maka akan tampil icon Facebook seperti ini atau icon-icon lainnya yang bisa kamu temukan di situs fontawesom .com .
Dan untuk mendapatkan hasil seperti pada icon folder di atas kamu hanya perlu menambahkan kode perintah beriut ini onclick="$(this).toggleClass('fa-folder fa-folder-open');" di belakang "fa fa-folder" contoh seperti berikut <i class"fa fa-folder" onclick="$(this).toggleClass('fa-folder fa-folder-open');"></i> .toggleClass berfungsi untuk mengubah Class pada CSS tidak terkecuali untuk fontawesome yang juga menggunakan class pada skrip htmlnya dan ini juga berlaku untuk class fontawesome lainnya seperti icon-icon lainnya contoh.
HTML / doble click to select
Atau icon-icon lainnya yang nantinya bisa kamu sesuaikan sesuai kebutuhan. selain membuat icon tersebut berubah saat diklik, kamu juga bisa membuat icon tersebut berputar saat diklik contoh: coba klik ini atau ini .
Untuk membuat icon tersebut berputar saat diklik caranya sama saja seperti cara pertama hanya ada sedikit yang di ubah yaitu mengganti tag "fa-class-x fa-class-x" menjadi "fa-spin" lebih jelasnya seperti berikut <i class='fa-refresh' onclick="$(this).toggleClass('fa-spin');></i>
Bagaimana mudah kan... demikian artikel kali ini semoga artikel yang saya tulis ini dapat dimengerti tapi jika masih ada yang belum paham bisa tanyakan di kolom komentar. terimakasih.
Post a Comment for "FontAwesome berubah / berganti class saat di klik"