LEMBAGA PENDIDIKAN KOMPUTER ADI LUHUR JAKARTA

MODUL TEKNOLOGI INFORMASI DAN KOMUNIKASI

WEB DESIGN & PROGRAMING [ CSS ]

Pertemuan Ke- : 14
Durasi : 30 Menit (Home Learning)
Materi : Icon

Jika sebelumnya kita telah mempelajari bagaimana cara mengganti dan

menggunakan berbagai jenis fonts pada halaman HTML, untuk kali ini kita akan
memperlajari bagaimana menambahkan icon pada halaman HTML dengan
menggunakan database icon dari tiga penyedia jasa layanan fonts dan Icon yaitu Google,
Fontawesome, dan Bootsrap.

A. MENAMPILKAN ICON DARI GOOGLE CSS

HTML SCRIPT
HASIL

PENJELASAN
1. <link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
Script diatas difungsikan untuk menautkan halaman web (HTML) yang kita buat,
agar dapat mengambil data icon dari database icon google.

2. <i class="material-icons">cloud</i>
Pada contoh diatas kita mencoba memasukkan / menampilkan Icon dengan
membubuhi kata kunci yang diberikan oleh google untuk menampilkan icon
yang kita kehendaki (dalam hal ini kata kunci “Cloud”)

3. <i class="material-icons" style="font-size:48px;color:red;">cloud</i>

Icon yang ingin kita tampilkan juga dapat kita rubah baik ukuran maupun
warnanya, dengan menggunakan tag Style.

4. Untuk melihat daftar kata kunci icon google, bisa di lihat pada halaman berikut
ini ;
https://material.io/resources/icons/?icon=date_range&style=baseline
B. MENAMPILKAN ICON DARI FONTAWESOME
SCRIPT HTML

HASIL
 PENJELASAN
Sama dengan penjelasan pada Google Icon diatas
Untuk melihat daftar kata kunci icon font awesome, bisa di lihat pada halaman
berikut ini ;
https://fontawesome.com/icons?d=gallery&m=free

C. MENAMPILKAN ICON DARI BOOTSRAP

SCRIPT HTML
HASIL

PENJELASAN
Sama dengan penjelasan pada Google Icon diatas
Untuk melihat daftar kata kunci icon font awesome, bisa di lihat pada halaman
berikut ini ;
https://icons.getbootstrap.com/
KODE TOKEN ABSENSI MATPEL TIK