Langkah 2: Styling dengan CSS
Selanjutnya, kita perlu mengatur tata letak dan gaya untuk icon bar menggunakan CSS. Berikut adalah contoh kode CSS untuk memberikan styling pada icon bar:
.icon-bar {
width: 100%;
background-color: #333;
overflow: auto;
}
.icon-bar a {
float: left;
width: 25%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: #ddd;
color: black;
}
Pada contoh di atas, kita mengatur lebar, warna latar belakang, dan beberapa properti lainnya untuk icon bar. Setiap icon memiliki lebar 25% dari lebar total icon bar, sehingga icon-icon tersebut akan terbagi secara merata di dalamnya.
Langkah 3: Menambahkan Ikon
Setelah icon bar kita memiliki tata letak yang diinginkan, langkah selanjutnya adalah menambahkan ikon-ikon yang sesuai. Kita dapat menggunakan ikon dari berbagai sumber, seperti Font Awesome atau SVG icons.
