Cách dùng icon font awesome làm mã nội dung CSS

Chí Vỹ

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);
}

Kết quả CSS

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

Kết quả màu đỏ

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.

Thứ Bảy, 07/01/2023 10:00

5 ★ 1 👨 1.450

#CSS

Bạn nên đọc

Xác thực tài khoản!

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:

Số điện thoại chưa đúng định dạng!