Tạo Icon Bar với CSS

Để tạo Icon Bar (thanh biểu tượng) với CSS, code như sau:

Ví dụ 1: Horizontal Icon Bar (ngang) với Font Awesome

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
    width: 100%;
    background-color: black;
    overflow: auto; /* clearfix cho float */
}
.icon-bar a {
    float: left;
    width: 30%; /* 3 items = ~33% mỗi */
    text-align: center;
    color: white;
    font-size: 30px;
    padding: 12px 0;
    text-decoration: none;
    transition: background 0.3s;
}
.icon-bar a:hover { background-color: #333; }
.icon-bar .active { background-color: blue; }
</style>
</head>
<body>
<div class="icon-bar">
    <a href="#"><i class="fa fa-home"></i></a>
    <a href="#"><i class="fa fa-search"></i></a>
    <a class="active" href="#"><i class="fa fa-bars"></i></a>
</div>
</body>
</html>

Ví dụ 2: Vertical Icon Bar (dọc)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
    width: 50px;
    background-color: black;
    height: 100vh;
    position: fixed;
    left: 0; top: 0;
}
.icon-bar a {
    display: block;
    text-align: center;
    color: white;
    font-size: 30px;
    padding: 16px 0;
    text-decoration: none;
    transition: background 0.3s;
}
.icon-bar a:hover { background-color: #333; }
.icon-bar .active { background-color: blue; }
</style>
</head>
<body>
<div class="icon-bar">
    <a class="active" href="#"><i class="fa fa-home"></i></a>
    <a href="#"><i class="fa fa-search"></i></a>
    <a href="#"><i class="fa fa-bars"></i></a>
</div>
</body>
</html>

Modern: Không dùng Font Awesome (SVG inline hoặc Unicode)

<nav class="icon-bar" aria-label="Main navigation">
    <a href="#" aria-current="page">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg>
        <span class="label">Home</span>
    </a>
    <a href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <span class="label">Search</span>
    </a>
</nav>

<style>
.icon-bar {
    display: flex;
    flex-direction: column; /* vertical */
    gap: 4px;
    padding: 1rem;
    background: #1a1a1a;
}
.icon-bar a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
}
.icon-bar a:hover { background: #333; }
.icon-bar a[aria-current="page"] { background: #0066cc; }
.icon-bar .label { display: none; } /* Chỉ hiện icon */
@media (min-width: 600px) {
    .icon-bar .label { display: inline; }
}
</style>

Responsive: Horizontal trên mobile, Vertical trên desktop

.icon-bar {
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
}
@media (min-width: 768px) {
    .icon-bar {
        flex-direction: row;
        justify-content: center;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        border-radius: 1rem 1rem 0 0;
        padding: 0.5rem;
    }
}

Lưu ý

• Font Awesome 4 đã cũ — khuyến nghị dùng Font Awesome 6, hoặc SVG inline, hoặc Unicode icons
• overflow: auto trên horizontal bar để clear float (hoặc dùng flexbox)
• Vertical bar fixed: cần padding-left cho content chính
• Luôn có label text (visually hidden) cho accessibility