Cách dùng icon font awesome làm mã nội dung CSS
CSS có một tính năng tuyệt vời mang tên Pseudo-elements
. Dùng Pseudo-elements
, bạn có thể thêm nội dung vào trang web chỉ bằng CSS.
Font awesome dùng ::before
pseudo-element để thêm icon vào trang bằng code content CSS. Dưới đây là chi tiết cách thực hiện.
Bước 1: Tải file CSS font awesome
Thêm file CSS font awesome vào trong thẻ <head> của trang. Bài viết dùng icon font awesome phiên bản 6.2.0.
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css">
</link>
</head>
Bước 2: Xác định tên class CSS cho icon
Bạn cần thêm tên class độc đáo cho phần tử icon này:
<!--Brand Icon -->
<span class="twitter"></span>
<!--Regular Icon -->
<span class="user"></span>
<!--Solid Icon -->
<span class="cloud"></span>
Bước 3: Đặt code nội dung CSS cho icon này
Dùng icon font awesome miễn phí 2016 để tải code nội dung CSS. Đối với tất cả icon, giá trị unicode đã được xác định.
/* Brand icon*/
.twitter::before {
content: '\f099';
}
/* Regular Icon */
.user::before {
content: '\f007';
}
/* Solid Icon */
.cloud::before {
content: '\f0c2';
}
Không hiển thị bất kỳ icon nào bởi chúng ta cần thêm font family.
Bước 4: Thiết lập kiểu font icon
Đối với mỗi loại icon, ví dụ regular, solid hay brand, bạn đều cần phải thiết lập kiểu font phù hợp. Ở font awesome 6, bạn có các thuộc tính tùy biến CSS được xác định trước. Bạn có thể dùng chúng để thiết lập kiểu font
như ý muốn. Hãy xem danh sách bên dưới.
Kiểu icon | Thuộc tính tùy biến CSS |
---|---|
Brands | --fa-font-brands |
Solid | --fa-font-solid |
Regular | --fa-font-regular |
/* Brand icon*/
.twitter::before {
content: '\f099';
font: var(--fa-font-brands);
}
/* Regular Icon */
.user::before {
content: '\f007';
font: var(--fa-font-regular);
}
/* Solid Icon */
.cloud::before {
content: '\f0c2';
font: var(--fa-font-solid);
}
Thuộc tính tùy biến CSS ở trên bổ sung font-family
và font-weight
vào icon này.
/* Brand icon*/
.twitter::before {
content: '\f099';
font-family: "Font Awesome 6 brands";
font-weight: 400;
}
/* Regular Icon */
.user::before {
content: '\f007';
font-family: "Font Awesome 6 free";
font-weight: 400;
}
/* Solid Icon */
.cloud::before {
content: '\f0c2';
font-family: "Font Awesome 6 free";
font-weight: 900;
}
Thuộc tính tùy chỉnh CSS | font-family | font-weight |
---|---|---|
--fa-font-brands | Font Awesome 6 brands | 400 |
--fa-font-solid | Font Awesome 6 free | 900 |
--fa-font-regular | Font Awesome 6 free | 400 |
Không có thuộc tính CSS tùy chỉnh được xác định trong phiên bản font awesome 5.
Kiểu icon | font-family | font-weight |
---|---|---|
brands | Font Awesome 5 brands | 400 |
solid | Font Awesome 5 free | 900 |
regular | Font Awesome 5 free | 400 |
Bước 5: Thêm các kiểu phổ biến vào icon này
Code trên hiện icon ở kiểu mặc định. Nếu muốn thêm một số kiểu tùy biến vào icon này, hãy thêm một class cần thiết cho biểu tượng đó.
<!--Brand Icon -->
<span class="twitter fontawesomeicon"></span>
<!--Regular Icon -->
<span class="user fontawesomeicon"></span>
<!--Solid Icon -->
<span class="cloud fontawesomeicon"></span>
Sau đó thêm các kiểu cần thiết. Bạn đang thay đổi màu của icon sang màu đỏ.
.fontawesomeicon {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
color: red;
}
Code nội dung CSS font awesome không hoạt động?
Nếu làm theo các bước trên, code nội dung CSS font awesome không hoạt động, hãy kiểm tra lại code và nhớ:
- Thêm code CSS content chính xác.
- Đừng quên thêm
font-family
&font-weight
.
Trên đây là các bước cơ bản để dùng icon font awesome làm code nội dung CSS. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
Có thể bạn quan tâm
-
Căn bậc 2, cách tính căn bậc 2
-
Tạo GUI đầu tiên của bạn trong Python với Glade và GTK+
-
Cách kết nối và sử dụng PostgreSQL trong Python
-
Htmx là gì? Htmx có thể đơn giản hóa trang web của bạn như thế nào?
-
Công thức tính thể tích khối lăng trụ đứng, hình lăng trụ
-
3 cách dễ dàng để căn giữa một phần tử bằng CSS