Cách tạo: Thanh điều hướng biểu tượng

Cách tạo thanh biểu tượng

Bước 1 - Thêm HTML：

<!-- Thêm thư viện biểu tượng -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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-envelope"></i></a>
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a>
</div>

Bước 2 - Thêm CSS:

Mẫu dọc

.icon-bar {
  width: 90px; /* Đặt độ rộng cụ thể */
  background-color: #555; /* Màu nền xám đậm */
}
.icon-bar a {
  display: block; /* Đặt liên kết theo dọc, thay vì ngang */
  text-align: center; /* Định dạng văn bản theo trung tâm */
  padding: 16px; /* Thêm lề trong */
  transition: all 0.3s ease; /* Thêm hiệu ứng chuyển đổi cho hiệu ứng trỏ chuột */
  color: white; /* Màu chữ là trắng */
  font-size: 36px; /* Tăng kích thước chữ */
}
.icon-bar a:hover {
  background-color: #000; /* Thêm màu khi trỏ chuột */
}
.active {
  background-color: #04AA6D; /* Thêm màu hoạt động/hiện tại */
}

Thử ngay

Mẫu ngang

.icon-bar {
  width: 100%; /* Độ rộng toàn bộ */
  background-color: #555; /* Màu nền xám đậm */
  overflow: auto; /* Dư ra do trôi ngang */
}
.icon-bar a {
  float: left; /* Đặt liên kết cạnh nhau */
  text-align: center; /* Định dạng văn bản theo trung tâm */
  width: 20%; /* Độ rộng bằng nhau (5 biểu tượng, mỗi biểu tượng độ rộng 20% = 100%) */
  padding: 12px 0; /* Một số lề trên dưới và trong */
  transition: all 0.3s ease; /* Thêm hiệu ứng chuyển đổi cho hiệu ứng trỏ chuột */
  color: white; /* Màu chữ là trắng */
  font-size: 36px; /* Tăng kích thước chữ */
}
.icon-bar a:hover {
  background-color: #000; /* Thêm màu khi trỏ chuột */
}
.active {
  background-color: #04AA6D; /* Thêm màu hoạt động/hiện tại */
}

Thử ngay

Trang liên quan

Hướng dẫn:Thanh điều hướng CSS

Hướng dẫn:Hướng dẫn biểu tượng