Pembuatan web sepertinya susah, karena banyak komponen yang harus dibuat. Seperti background dan ikon. Show Bagi seorang desainer, mungkin tidak masalah membuat banyak gambar background dan ikon. Tapi, bagi programmer atau developer…ini sangat merepotkan. Untunglah ada Font-awesome, yang merupakan framework CSS untuk membuat ikon. Font-awesome memiliki ratusan ikon yang bisa kita gunakan. Pada tulisan ini, kita akan belajar cara membuat ikon menggunakan Font-awesome. Dimulai dari tahap instalasi sampai ke pembuatan animasi. Mari kita mulai… Menambahkan Font-awesomePertama, kita harus download Font-awesome-nya terlebih dahulu. Silahkan buka: fontawesome.iountuk men-download. Setelah itu, ekstrak isinya ke dalam direktori proyek (web). Biasanya ditaruh di dalam direktori 3.Agar memudahkan, kita ubah direktori 4 (rename) menjadi 5 saja.Menyisipkan Font-awesome dalam HTMLCara menggunakan Font-awesome sama seperti cara menggunakan framework CSS pada umumnya. Kita tinggal me-link-kan file CSS-nya ke dalam HTML. Kemudian, tinggal panggil nama-nama class-nya. Contoh:
Kita juga dapat memanfaatkan CDN, bila ingin menggunakan Font-awesome tanpa hosting.
Membuat Ikon dengan Font-awesomeIkon dapat kita buat dengan tag 6 yang disertai kelas 7 (font-awesome).Biasanya pada Bootstrap, kita menggunakan tag 8 untuk membuat ikon. Namun, pada Font-awesome disarankan menggunakan tag 6. Karena lebih pendek.Contoh:
Hasilnya: Penjelasan:
Mengubah Ukuran IkonUkuran ikon akan mengikuti ukuran font pada CSS, tapi dapat kita perbesar dan perkecil sesuai kebutuhan. Font Awesome menyediakan kelas-kelas untuk menentukan ukuran ikon, diantaranya: 2 (33% lebih besar), 3, 4, 5, dan 6.Contoh penggunaan:
Maka akan hasilnya: Mengubah Warna IkonPada dasarnya Font-awesome akan mengikuti warna teks dari sebuah elemen. Berarti, untuk mengubah warna ikon font-awesome, kita harus merubah warna untuk teksnya. Contoh:
Hasilnya: Teks ini berwarna orage dan juga ikon ini berwarna orange Lalu, bagaimana kalau kita ingin ikonnya saja yang berwarna orange? Gampang, kita tinggal berikan warna kepada ikonnya.
Hasilnya: Teks ini berwarna hitam dan ikon ini berwarna orange Tips: Gunakan class 7 untuk mengubah warna ikon menjadi putih (kebalikan dari hitam)Menggabungkan Beberapa IkonKadang kita membutuhkan beberapa ikon untuk digabungkan, misalnya kita ingin menggabungkan ikon square () dengan ikon terminal () agar membentuk sebuah ikon terminal yang dibungkus dengan kotak. Untuk melakukan ini, kita membutuhkan sebuah elemen untuk membungkus ikon yang akan digabungkan. Elemen tersebut harus menggunakan class 8.Contoh:
Pada contoh di atas kita menggabungkan ikon 9 dan 0, perlu dicatat yang ditulis duluan akan menjadi yang paling bawah dalam tumpukan (stack) ikon.Class 1 adalah ukuran ikonnya, sama seperti 2, 3, dsb.Hasilnya: Coba juga untuk bereksperimen membuat tumpukan ikon yang lain:
Hasilnya: Membuat Ikon untuk ListUntuk menggunakan ikon font-awesome untuk List, kita bisa menggunakan class 4 dan 5.Contoh:
Hasilnya:
Memutar IkonUntuk memutar ikon, kita bisa menggunakan class 6 dan 7.Contoh:
Hasilnya: normal Membuat Kustom CSS SendiriKadang kita ingin membuat style CSS sendiri untuk Font-awesome. Misalkan kita ingin mengubah warna saat ikon disentuh pointer (hover). 0 1Hasilnya: Membuat Ikon dengan AnimasiBiasanya dalam web, terdapat ikon yang bisa bergerak. Seperti ikon yang tampil saat loading… Font-awesome menyediakan dua kelas untuk menggerakkan ikon: 8 dan 9.Kelas ini biasanya digunakan pada ikon 0, 1, 2 dan 3. Bisa saja kita gunakan pada jenis ikon yang lain, tapi hasilnya akan kurang bagus. |