Pengenalan Font Awesome dan cara menggunakan font awesome

Assalammualaikum Wr. Wb.

Kali ini saya akan sharing mengenai font-awesome sebenarnya, 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 yaa....

A. PENDAHULUAN

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.

B. ALAT DAN BAHAN

Library Font Awesome (download)
Text Editor.
Web Browser.
1 Unit PC/Laptop.

C. JANGKA WAKTU PELAKSANAAN

Sekitar 10 menit jam.

D. RANGKAIAN KEGIATAN

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 dulu 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...

E. HASIL YANG DIDAPATKAN

Dapat Menggunakan font awesome dan mengerti fungsi font awesome.

F. TEMUAN PERMASALAHAN

font awesome tidak berfungsi karena file yang saya miliki tidak lengkap, yaitu saya hanya mengcopy file css nya.

G. 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.

H. REFERENSI

Sekian sharing yang dapat saya sampaikan hari ini mengenai font awesome.

Semoga Bermanfaat.....

Wassalammualaikum Wr. Wb.

Share this