CÁCH LÀM - Các nút trên mạng xã hội
Tìm hiểu cách tạo kiểu cho các nút mạng xã hội bằng CSS.
Cách tạo kiểu cho các nút trên mạng xã hội
Bước 1) Thêm HTML:
Thí dụ
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
...
Bước 2) Thêm CSS:
Ví dụ hình vuông
/* Style all font awesome icons */
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook
{
background: #3B5998;
color:
white;
}
/* Twitter */
.fa-twitter {
background:
#55ACEE;
color: white;
}
Các nút tròn
Mẹo: Thêm border-radius:50%
để tạo các nút tròn và giảm width
:
Ví dụ làm tròn
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
Mẹo: Đi tới Hướng dẫn về biểu tượng của chúng tôi để tìm hiểu thêm về các biểu tượng.
Đi tới Hướng dẫn về các nút CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các nút.