Cara termudah untuk menambahkan ikon ke halaman HTML Anda adalah menggunakan pustaka ikon seperti Font Awesome atau Bootstrap Icons.
Ikon berbasis font vektor ini dapat diubah ukurannya dan diberi warna dengan mudah menggunakan properti CSS font-size dan color biasa.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.icon-box { font-size: 28px; margin: 10px; display: inline-block; }
</style>
</head>
<body>
<div class="icon-box" style="color:#04AA6D;"><i class="fa-solid fa-circle-check"></i> Sukses</div>
<div class="icon-box" style="color:#0d2e5c;"><i class="fa-solid fa-graduation-cap"></i> Belajar</div>
<div class="icon-box" style="color:#fca311;"><i class="fa-solid fa-bolt"></i> Cepat</div>
</body>
</html>Ikon vektor tidak pernah pecah atau buram di layar ponsel resolusi tinggi.
Properti CSS apa yang digunakan untuk mengubah ukuran sebuah ikon berbasis icon-font?