Tutorial Pemrograman

Cara Menggunakan Google Icons dengan HTML

HTML adalah salah satu bahasa markup yang berfungsi untuk membuat kerangka atau merancang tampilan website.

Kamu akan berpikir cara menambahkan ikon pada elemen object tertentu, seperti tombol submit, pesan peringatan, atau sekedar membuat ikon saja ke dalam website kamu tanpa menggunakan image atau gambar, melainkan menggunakan font material icon yang dikenal dengan Google Icons. Google Icons ini bisa dijadikan alternatif dari font Awesome dalam menambahkan ikon terhadap object tertentu.

Untuk melihat ikon-ikon yang ada Google Icons, silahkan kunjungi link ini. Disana ada banyak ikon yang bisa kamu gunakan ke dalam website kamu.

Berikut cara menggunakan Google Icons dengan HTML.

Langkah:

1. Silahkan buka teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “simple-google-icon.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Lihat hasilnya.

Selesai.

Catatan:

Apabila kamu ingin menggunakan Google Icons ini, maka kamu wajibkan menambahkan kode script di bawah ini.

Letakkan kode script ini di atas barisan </head>. Kemudian kamu bisa tambahkan kode script untuk memasukkan ikon tersebut.

Kamu bisa cari nama ikon tersebut di link ini, kemudian masukkan nama ikon tadi ke dalam kode script yang diatas apabila kamu telah temukan nama ikon yang kamu inginkan.

Demikian tutorial cara menggunakan Google Icons dengan HTML. Selamat mencoba.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top