Icon dapat dengan mudah ditambahkan ke halaman HTML Anda, dengan menggunakan icon library.
Cara Menambahkan Icon
Cara termudah untuk menambahkan icon ke halaman HTML Anda, adalah dengan icon library (pustaka ikon), seperti Font Awesome.
Tambahkan nama kelas ikon yang ditentukan ke elemen inline HTML (seperti
<i> atau <span>).
Semua icon di icon library di bawah ini, adalah vektor terukur yang dapat disesuaikan dengan CSS (ukuran, warna, bayangan, dll.)
Icon Font Awesome
Untuk menggunakan icon Font Awesome, buka
fontawesome.com, masuk, dan dapatkan kode untuk ditambahkan di bagian
<head> pada halaman HTML Anda:
<script src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>
Catatan: Tidak diperlukan pengunduhan atau penginstalan.
Contoh
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"
crossorigin="anonymous"></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>
Icon Bootstrap
Untuk menggunakan glyphicon Bootstrap, tambahkan baris berikut di dalam bagian
<head> pada halaman HTML Anda:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Catatan: Tidak diperlukan pengunduhan atau penginstalan.
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>
Icon Google
Untuk menggunakan icon Google, tambahkan baris berikut di dalam bagian
<head> pada halaman HTML Anda:
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
Catatan: Tidak diperlukan pengunduhan atau penginstalan.
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>
Sumber referensi: w3schools
Komentar
Posting Komentar