Thanh Menu Tiện ích Đẹp CSS icon Cực Đẹp Cho Blog

Thanh Menu Tiện ích Đẹp CSS icon Cực Đẹp Cho Blog

Xin Các hôm nay mình sẽ chỉa sẻ với các bạn một iện ích CSS cho blog rất đẹp, nếu bạn sở hữu cho mình 1 website bán hàng chuyên nghiệp đầy đủ mọi tính năng, thì hãy liên lệ với chúng tôi hoặc nhấn nút đăng ký khóa học làm web không cần biết lập trình. chỉ trong thời gian ngắn là bạn có thể tự thiết kế cho mình một website ưng ý nhất. và bây giờ mình bắt đầu chèn, phần CSS và HTML.

Bước 1: Chèn mã HTML bên dưới 

<!-- Add icon library -->
<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: Chèn mã CSS

.icon-bar {
  width: 90px; /* Set a specific width */
  background-color: #555; /* Dark-grey background */}

.icon-bar a {
  display: block; /* Make the links appear below each other instead of side-by-side */
  text-align: center; /* Center-align text */
  padding: 16px; /* Add some padding */
  transition: all 0.3s ease; /* Add transition for hover effects */
  color: white; /* White text color */
  font-size: 36px; /* Increased font-size */}

.icon-bar a:hover {
  background-color: #000; /* Add a hover color */}

.active {
  background-color: #4CAF50; /* Add an active/current color */}