Cara Menggunakan Google Icons dengan HTML

Tutorial By Dwitari

Last updated on Februari 27th, 2021

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 (https://material.io/tools/icons/). Disana ada banyak ikon yang bisa kamu gunakan ke dalam website kamu.

Berikut cara menggunakan Google Icons dengan HTML.

Cara Menggunakan Google Icons dengan HTML

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

2. Silahkan ketik kode script di bawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Simple Google Icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<center>
<p>Tutorial Simple Google Icons</p>
<i class="material-icons">phone</i>
<i class="material-icons">forum</i>
<i class="material-icons">attachment</i>
<i class="material-icons">duo</i>
<i class="material-icons">traffic</i>
<i class="material-icons">rss_feed</i>
<i class="material-icons">android</i>
<i class="material-icons">account_circle</i>
<i class="material-icons">build</i>
</center>
</body>
</html>

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.

Cara Menggunakan Google Icons dengan HTML 1

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.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

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

<i class="material-icons">[nama ikon]</i>

Kamu bisa cari nama ikon tersebut di link ini (https://material.io/tools/icons/), 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.