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
-
7 trình biên dịch trực tuyến tốt nhất 2025 cho C, C++, Java, Python
-
Lỗi thường gặp khi dùng Bootstrap
-
Cách đưa Bootstrap vào AngularJS bằng ng-bootstrap
-
Công thức tính diện tích mặt cầu, thể tích khối cầu
-
Cách làm nút bấm bo tròn đơn giản cho web bằng HTML
-
Công thức tính diện tích hình thang: thường, vuông, cân
-
Sự khác biệt giữa bootstrap.css và bootstrap-theme.css
-
Công thức tính diện tích hình thoi, chu vi hình thoi
-
9 công cụ soạn thảo HTML miễn phí tốt nhất cho Windows 2025
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Cũ vẫn chất
-
6 cách mở Computer/System Properties trong Windows 10
Hôm qua -
Cách khắc phục lỗi Apple CarPlay không hoạt động
Hôm qua -
Làm sao để tải phụ đề video trên Youtube nhanh chóng và đơn giản?
Hôm qua -
Tổng hợp các trang web lưu trữ dữ liệu trực tuyến miễn phí tốt nhất hiện nay
Hôm qua -
Chụp ảnh và soi gương cái nào sẽ cho bạn hình ảnh chính xác nhất?
Hôm qua -
3 cách tắt tường lửa Windows 11
Hôm qua -
Khắc phục lỗi Google Chrome crash thường xuyên, Chrome tự động tắt
Hôm qua -
4 cách ghim cửa sổ trên màn hình Windows
Hôm qua -
Lệnh cd trong Windows
Hôm qua -
Cách tạo bảng trong Canva
Hôm qua