Binti Qomariah - Assalamu'alaikum,
Kali ini saya akan sharing mengenai font-awesome, apa sih itu font-awesome?, apa fungsinya?, dan sulit nggak sih gunainnya?, apakah perlu font awesome pada pembuatan website?. Untuk lebih lengkapnya, simak pembahasan berikut saja ya.
PENGERTIAN
font-awesome merupakan sebuah toolkit font dan icon yang dibuat dalam bentuk CSS.
LATAR BELAKANG
Ingin mempercantik tampilan website dengan font awesome
MAKSUD DAN TUJUAN
Dapat Menggunakan dengan baik font awesome juga paham cara menggunakan font awesome.
ALAT DAN BAHAN
- Library Font Awesome (download)
- Text Editor.
- Web Browser.
- 1 Unit PC/Laptop.
JANGKA WAKTU PELAKSANAAN
Sekitar 10 menit jam.
URAIAN
Definisi Font Awesome
font-awesome merupakan sebuah toolkit font dan icon yang dibuat dalam bentuk CSS. kita dapat menggunakan font awesome ini dengan mudah, dengan cukup memberi tag html dan kita beri class yang nantinya nama classnya akan memanggil ikon font awesome.
Fungsi Font Awesome?
Font Awesome berfungsi untuk memberi ikon pada sebuah website, hal ini bertujuan untuk memberi tampilan tambahan untuk mempercantik website. font awesome sangat mudah digunakan, untuk mempelajari font awesome, anda hanya perlu mempelajari dasar penggunaan CSS Eksternal/internal, karena prinsipnya sama yaitu memanggil property yang ada di CSS. untuk perlu atau tidaknya font awesome dalam sebuah website itu relatif, karena juga tidak wajib member font awesome pada website, namun hanya untuk tampilan tambahan saja.
Cara Penulisan font awesome
Pastikan kita punya file font awesome, kita ekstrak, kemudian kita buat folder baru, dan masukkan file font awesome ke folder yang baru kita buat tadi, dan buat juga file htmlnya.
kemudian kita buat file htmlnya
Penjelasan :
- kita panggil file cssnya font awesome dengan cara memasukkan link rel
- kemudian kita membuat sebuah tag span, atau terserah kalian, dan kita masukkan class dengan nama fa fa-(nama ikon).
kemudian save, dan buka di browser, maka hasilnya akan menjadi seperti ini...
HASIL YANG DIDAPATKAN
Dapat Menggunakan font awesome dan mengerti fungsi font awesome.
TEMUAN PERMASALAHAN
-
KESIMPULAN
file yang ada di dalam font awesome harus terstruktur, karena file satu sama lainnya sangat bergantung, namun, walaupun filenya ada banyak, kita hanya perlu memanggil font-awesome.css dan font-awesome.min.css.
REFERENSI
http://fontawesome.io/
http://fontawesome.io/examples/
ConversionConversion EmoticonEmoticon