Tutorial Pemrograman

Cara Mengatur Warna Google Icons dengan CSS

CSS singkatan dari Cascading Style Sheets. CSS adalah salah satu bahasa markup yang berfungsi khusus untuk merancang tampilan pada website agar hasil tampilan website lebih maksimal dan sesuai kebutuhan klien atau perusahaan.

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.

Kamu bisa mengatur warna ikon-ikon tersebut dengan CSS, namun tidak memakai kode script background atau background-color, melainkan memakai color. Hal ini karena ikon ini sebenarnya bentuknya font bukan image.

Berikut cara mengatur warna Google Icons dengan CSS.

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 “fontcolor-google-icons.html”.

5. Klik Save.

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

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 mengatur ukuran ikon Google Icons menggunakan CSS baik secara inlineinternal, maupun eksternal.

Apabila kamu ingin mengatur warna ikon Google Icons memakai CSS internal atau eksternal. Maka, kamu bisa tambahkan kode script CSS di bawah ini.

Kini, kamu bisa menentukan warna ikon yang sesuai dengan fungsi dari ikon terhadap object pada website kamu. Object disini yang dimaksudkan seperti button, div, table, link, radiobutton, checkbox, dan sebagainya.

Demikian tutorial cara mengatur warna Google Icons dengan CSS.









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