Cara termudah untuk menambahkan icon ke halaman HTML kita, adalah dengan perpustakaan ikon, seperti Font Awesome.
Tambahkan nama kelas icon yang ditentukan ke elemen HTML (seperti <i> atau <span>).
Semua icon di pustaka ikon di bawah ini, adalah vektor skalabel yang dapat disesuaikan dengan CSS (ukuran, warna, bayangan, dll.)
Untuk menggunakan icon Font Awesome, buka fontawesome.com, masuk, dan dapatkan kode untuk ditambahkan di bagian halaman HTML kita:
<script src=”https://kit.fontawesome.com/yourcode.js”></script>
Baca lebih lanjut tentang bagaimana memulai dengan Font Awesome dalam tutorial Font Awesome 5.
Catatan: Tidak perlu mengunduh atau menginstal!
Contoh:
<!DOCTYPE html> <html> <head> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <body> <i class="fas fa-cloud"></i> <i class="fas fa-heart"></i> <i class="fas fa-car"></i> <i class="fas fa-file"></i> <i class="fas fa-bars"></i> </body> </html>
Untuk menggunakan glyphicons Bootstrap, tambahkan baris berikut di dalam bagian <head> halaman HTML Anda:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
Catatan: Tidak perlu mengunduh atau menginstal!
Contoh :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-remove"></i> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-envelope"></i> <i class="glyphicon glyphicon-thumbs-up"></i> </body> </html>
Untuk menggunakan icon Google, tambahkan baris berikut di dalam bagian <head> halaman HTML Anda:
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
Catatan: Tidak perlu mengunduh atau menginstal!
Contoh :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <i class="material-icons">cloud</i> <i class="material-icons">favorite</i> <i class="material-icons">attachment</i> <i class="material-icons">computer</i> <i class="material-icons">traffic</i> </body> </html>