Home » CSS » Icon di CSS: Library – Cara Menggunakan dan Contohnya

Icon di CSS: Library – Cara Menggunakan dan Contohnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Section Artikel

Cara Menambahkan Icon

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.)

Font Awesome Icons

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>

Bootstrap Icons

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>

Google Icons

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>

You may also like