Dito PriwantoSetelah pada seri Belajar CSS bagian 20 kita membahas tentang CSS Transparency, kini kita beralih ke konsep lain dalam desain interface, yaitu penggunaan CSS Icons untuk membuat tampilan website lebih menarik dan modern.
Ikon memiliki peran penting sebagai elemen visual yang membantu menyampaikan informasi secara cepat dan jelas. Bagi web designer maupun pengembang website, penggunaan ikon berbasis CSS memungkinkan penambahan ikon yang ringan, konsisten, dan mudah disesuaikan, tanpa harus bergantung sepenuhnya pada gambar konvensional.
Dengan memanfaatkan font icon atau ikon berbasis CSS, tampilan antarmuka website dapat menjadi lebih rapi, responsif, dan selaras dengan kebutuhan desain, sehingga meningkatkan pengalaman pengguna secara keseluruhan.
Pengertian CSS Icon
CSS Icons adalah simbol grafis yang ditampilkan pada halaman web dengan memanfaatkan kode CSS, baik melalui icon font, SVG, maupun elemen HTML yang diberi gaya (styling) menggunakan CSS. Pendekatan ini memungkinkan ikon ditampilkan tanpa harus menggunakan gambar konvensional, sehingga lebih ringan dan fleksibel.
Ikon berbasis CSS digunakan untuk membantu menyampaikan informasi dan mempermudah navigasi, seperti ikon menu, tombol aksi, atau penanda fitur tertentu. Dengan visual yang sederhana dan mudah dikenali, ikon dapat meningkatkan kenyamanan pengguna serta membuat tampilan website terlihat lebih modern dan profesional.
Cara Menggunakan CSS Icon
Secara umum, cara menggunakan icon pada website dapat dilakukan dengan memanfaatkan library icon atau ikon berbasis CSS/SVG. Cara paling mudah dan cepat adalah menggunakan library ikon ke halaman HTML, biasanya melalui CDN atau file CSS yang disediakan.
Rekomendasi penyedia icon
Berikut beberapa rekomendasi penyedia icon yang dapat digunakan untuk website Anda.
Font Awesome 4
Font Awesome sangat populer di bidang desain web, memiliki jumlah dan jenis yang cukup banyak dan lengkap, Anda dapat menggunakannya secara gratis untuk website Anda.
Cara menggunakan font awesome 4 menggunakan cdn:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">Implementasi ke kode html
<i class="fa fa-car"></i>Material Symbol & Icons
Material Symbol & Icons disediakan oleh Google font dan memiliki jumlah icon yang sangat banyak, Anda dapat menggunakannya secara gratis
Cara menggunakan font Material Symbol & Icons menggunakan cdn
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Implementasi ke kode html
<i class="material-icons">home</i>Heroicons
Berbeda dengan font awesome dan material symbol, heroicons menyediakan icon dalam bentuk file svg yang dapat di custom sesuai dengan kebutuhan.
Cara menggunakannya, Anda cukup mengunjungi situs web resmi heroicons kemudian copy kode svg nya kemudian paste ke kode html web. Berikut contoh kode svgnya
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
</svg>Contoh Implementasi
Tidak jauh berbeda dengan script CSS mengenai box model, berikut adalah contoh script lengkap penggunaan CSS Icon yang telah diterapkan ke kode html.
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Icon</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<style>
.container {
display: flex;
justify-content: center;
}
.container .box {
margin: 10px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #dadada;
border-radius: 10px;
width: 150px;
height: 150px;
}
.material-symbols-outlined {
font-size: 40px;
}
body {
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<span class="material-symbols-outlined">home</span>
<div><strong>Box Satu</strong></div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
<div class="box">
<span class="material-symbols-outlined">speed</span>
<div><strong>Box Dua</strong></div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
<div class="box">
<span class="material-symbols-outlined">search</span>
<div><strong>Box Tiga</strong></div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
<div class="box">
<span class="material-symbols-outlined">settings</span>
<div><strong>Box Empat</strong></div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
</body>
</html>Jika diakses menggunakan browser, maka akan menampilkan hasil sebagai berikut:
Penutup
CSS Icon merupakan elemen visual yang sangat penting dalam pengembangan web karena membantu menyampaikan informasi dan fungsi secara cepat serta intuitif. Dengan memanfaatkan CSS, ikon dapat ditampilkan secara ringan, fleksibel, dan mudah dikustomisasi dari segi ukuran, warna, maupun efek interaksi tanpa bergantung pada gambar statis.
Penggunaan CSS Icon yang tepat tidak hanya mempercantik tampilan antarmuka, tetapi juga meningkatkan pengalaman pengguna dan efisiensi desain dalam pembuatan website modern.
Demikian artikel belajar CSS bagian 21 tentang CSS Icons. Ikuti terus kelas belajar CSS selanjutnya di Rumahweb Indonesia, agar kemampuan CSS Anda semakin meningkat. Selamat mencoba.
