Cách thực hiện - Các nút 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.
Hãy tự mình thử »
Cách tạo kiểu cho các nút mạng xã hội
Bước 1) Thêm HTML:
Ví 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;
}
Hãy tự mình thử » 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%;
}
Hãy tự mình thử »Mẹo: Đi tới Hướng dẫn biểu tượng của chúng tôi để tìm hiểu thêm về biểu tượng.
Đi tới Hướng dẫn về 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.