Ikon CSS

Bagaimana menambah ikon

Cara paling mudah untuk menambah ikon ke halaman HTML adalah menggunakan pustaka ikon, seperti Font Awesome.

Tambahkan nama kelas ikon yang ditentukan ke setiap elemen HTML yang berada di dalam baris (seperti <i> atau <span>).

Semua ikon di pustaka ikon di bawah ini adalah vektor yang dapat diukur, dan dapat disesuaikan menggunakan CSS (ukuran, warna, bayangan, dll).

Font Awesome ikon

Untuk menggunakan ikon Font Awesome, kunjungi fontawesome.com, masuk dan dapatkan kode untuk ditambahkan ke bagian <head> halaman HTML Anda:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Baca lebih lanjut tentang cara memulai menggunakan Font Awesome di tutorial Font Awesome 5 kami.

Pemberitahuan: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>

Hasil:

Coba Sendiri

Ikon Bootstrap

Untuk menggunakan glyphicons Bootstrap, tambahkan baris berikut di bagian <head> halaman HTML Anda:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Pemberitahuan: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>

Hasil:

Coba Sendiri

Ikon Google

Untuk menggunakan ikon Google, tambahkan baris berikut di bagian <head> halaman HTML Anda:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Pemberitahuan: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>

Hasil:

Coba Sendiri