diff --git a/CSS/021 CSS Icons/README.md b/CSS/021 CSS Icons/README.md new file mode 100644 index 0000000..5a949ae --- /dev/null +++ b/CSS/021 CSS Icons/README.md @@ -0,0 +1,106 @@ +# CSS Icon + +## Cara Menambahkan Icon + +Cara paling gampang untuk menambahkan icon di halaman HTML kamu adalah dengan menggunakan icon dari icon library seperti Font Awesome. + +Cukup dengan menambahkan nama dari icon class pada HTML element yang bersifat inline, seperti `` atau ``. + +Semua icon dari icon library yang ada di bawah ini adalah vektor yang bisa diubah ukurannya dan bisa dikustomisasi dengan menggunakan CSS seperti mengubah ukuran, warna, bayangan, dll. + +## Icon dari Font Awesome + +Untuk menggunakan icon dari Font Awesome, pertama-tama, kunjungi [fontawesome.com](https://fontawesome.com), sign in, dan copy kode di sana untuk ditambahkan di `` pada halaman HTML. + +Kode yang dimaksud seperti ini: +```HTML + +``` + +Catatan: tidak perlu download atau install. + +Contoh: +```HTML + + + + + + + + + + + + + +``` + +Hasil: + +![Icon dari Font Awesome](https://i.ibb.co/Q63N87N/Screenshot-2022-10-04-004714.png) + + +## Icon dari Bootstrap + +Untuk menggunakan icon solid dari Bootstrap, tambahkan kode berikut ini di dalam tag `` pada halaman HTML: +```HTML + +``` + +Catatan: tidak perlu download atau install. + +Contoh: +```HTML + + + + + + + + + + + + + +``` + +Hasil: + +![Icon dari Bootstrap](https://i.ibb.co/3p71Br4/Screenshot-2022-10-04-005335.png) + +## Google Icon + +Untuk menggunakan Google Icon, tambahkan baris kode di bawah ini ke dalam ``pada halaman HTML: + +```html + +``` +Catatan: tidak perlu download atau install. + +Contoh: +```HTML + + + + + + + cloud + favorite + attachment + computer + traffic + + +``` + +Hasil: + +![Icon dari Google](https://i.ibb.co/NSQCsYc/Screenshot-2022-10-04-005731.png) + + + +Sumber: [w3schools.com](https://www.w3schools.com/css/css_icons.asp) \ No newline at end of file