Icon Bar – Tạo Icon cho Menu – Thủ thuật CSS – 3

Icon Bar – Icon cho Menu

Hướng dẫn các bạn cách tạo 1 icon menu với CSS.



Chúng ta sẽ áp dụng thêm thư viện hỗ trợ CSS là Font-Awesome. trong thư viện này có rất nhiều icon hoặc logo đẹp, các bạn có thể xem thêm tại đây.
Như thường lệ, chúng ta sẽ tải về và import vào thư viện này vào thẻ header trong project của mình, hoặc gọi trực tiếp qua CDN của Font-Awesome. Ai chưa biết cách import có thể xem lại tại đây.
Chúng ta import theo cú pháp

<link rel=”stylesheet” href=”đường dẫn”>
Sau khi đã có đầy đủ thư viện hỗ trợ, chúng ta bắt tay vào làm thôi.

Bước 1 :

Tạo 1 thẻ element bên ngoài và các thẻ menu bên trong.

<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>

Class=”active” là class demo cho việc active theo trang. Mình sẽ có 1 bài hướng dẫn chi tiết cách làm 1 menu responsive sau.

Bước 2: Viết CSS

CSS chúng ta sẽ viết trên thẻ <style> </style> nhé các bạn.

Bây giờ các bạn phải tạo block cho chúng nó để nằm trên 1 hàng chứ đúng ko. Vì thế thẻ bọc ngoài cùng có thuộc tính là display:flex;

.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;

display:flex;
}

// Thiết kế các thẻ <a> nằm từ trái qua phải. Vị trí , font chữ , khoảng cách của icon :

.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}

// Thêm hiệu ứng khi rê chuột vào :

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

Xác định thẻ Active

.active {
background-color: #4CAF50;
}

Như vậy là đã xong 1 menu đơn giản.

Và dưới đây là toàn bộ code của bài này:

<!DOCTYPE html>
<html>
<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: #555;
overflow: auto;
}

.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}

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

.active {
background-color: #4CAF50;
}
</style>
<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-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *