68 Kopakolong, Thống nhất, TP.Kon Tum 600000

14.349171, 108.007778

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

VeoSpot Designer - Blog hướng dẫn thiết kế website trong 7 ngày, website bán hàng, website giới thiệu công ty

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
Chào bạn! hôm nay mình sẽ chia 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 */
}