Satu gambar bisa menggambarkan 1000 kata-kata
Icon adalah gambar kecil di samping menu / teks (biasanya) untuk membantu viasualisasi dari menu tersebut.
Contoh:
Di CSS umum digunakan icon yang sudah disediakan oleh vendor besar, yaitu:
Font Awesome
Yang sering digunakan adalah font-awesome. Penggunaan dari icon ini juga sangat mudah.
Ada banyak cara untuk menggunakan icon ini, dalam tutorial ini saya menggunakan jquery.
Pasang script dibawah setelah kode <head> atau sebelum </head>.
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg="nest"></script>
Cara menggunakannya sangat mudah, yaitu tinggal menggunakan format:
<i class="fas fa-camera"></i>
fas adalah style icon tersebut, dan fa-camera adalah icon yang dipanggil.
Untuk list icon dapat kamu lihat di: https://fontawesome.com/icons
Bootstrap icon
Jika kamu sudah menggunakan template berbasis bootstrap maka kamu sudah bisa menggunakan ini.
Tapi, kalau belum. Install dulu CSSnya, dengan cara panggil CSS eksternal dibawah ini. Taruh setelah kode <head>.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
Cara menggunakannya sama seperti font awesome.
<i class="glyphicon glyphicon-cloud"></i>
Ganti glyphicon-cloud dengan nama icon.
List iconnya: https://icons.getbootstrap.com/#icons
Google icon
Install font icon dari google.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Cara menggunakannya:
<i class="material-icons md-18">face</i>
Ganti face dengan icon yang kamu inginkan. List iconnya: https://material.io/resources/icons/?style=baseline