Font Awesome 5 là một trong những icon font phổ biến nhất hiện nay, tại thời điểm viết bài 28/10/2020 với phiên bản 5. 15. 1 hỗ trợ trên 1600 biểu tượng miễn phí, rất dễ dàng để tích hợp vào trang web, công việc của bạn bây giờ là biểu tượng lựa chọn và sao chép. Font Awesome có bản miễn phí và bản trả phí, tuy nhiên bạn chỉ cần sử dụng bản miễn phí là đủ để làm đẹp cho trang web của mình
01. Thử nghiệm
- Liên kết thư viện. https. // phông chữ tuyệt vời. com/v5/tìm kiếm
- Danh sách icon bản miễn phí. https. // phông chữ tuyệt vời. com/v5/search?m=free
02. Cài đặt
Cách 1. Sử dụng liên kết CDN
//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
cách 2. Tải thư viện về hoặc một vài cách tải khác qua npm - yarn
03. Thêm thư viện vào trang web
Đối chiếu với liên kết CDN
Đối chiếu với thư viện tải về, giải nén và liên kết tới tệp tất cả. tối thiểu. css
Mẫu HTML cơ bản
DOCTYPE html>
Hướng dẫn sử dụng Fontawesome 5 | kentrung
04. Cách tìm biểu tượng và cách sử dụng
Các bạn lên trang web của mình có liệt kê toàn bộ icon, tìm tên icon bằng tiếng anh, ở đây mình tìm icon của người dùng
//fontawesome.com/v5/search?q=user&m=free
Nhấp vào biểu tượng chọn mà bạn thích, ở đây mình chọn biểu tượng user-tag, để sử dụng bạn chỉ cần sao chép đoạn mã vào trang web là xong
- Tên biểu tượng
- Kiểu biểu tượng và tiền tố
- mã unicode
- Mã html
- Gắn thẻ loại nhóm
- Support version
- If is.
6 thì bản PRO trả phí mới được sử dụngDOCTYPE html> Hướng dẫn sử dụng Fontawesome 5 | kentrung
05. Biểu tượng màu
Change color of icon
Kết quả
06. Định cỡ biểu tượng
Sử dụng các lớp
DOCTYPE html>
Hướng dẫn sử dụng Fontawesome 5 | kentrung
DOCTYPE html>
Hướng dẫn sử dụng Fontawesome 5 | kentrung
DOCTYPE html>
Hướng dẫn sử dụng Fontawesome 5 | kentrung
//fontawesome.com/v5/search?q=user&m=free
//fontawesome.com/v5/search?q=user&m=free
//fontawesome.com/v5/search?q=user&m=free
//fontawesome.com/v5/search?q=user&m=free
//fontawesome.com/v5/search?q=user&m=free
//fontawesome.com/v5/search?q=user&m=free
//fontawesome.com/v5/search?q=user&m=free
//fontawesome.com/v5/search?q=user&m=free
//fontawesome.com/v5/search?q=user&m=free
Kết quả
07. Biểu tượng trong Danh sách
Use class
//fontawesome.com/v5/search?q=user&m=free
DOCTYPE html>
Hướng dẫn sử dụng Fontawesome 5 | kentrung
Kết quả
08. Biểu tượng động
- Sử dụng lớp
1 để xoay tròn biểu tượng liên tục - Sử dụng lớp
2 để xoay tròn biểu tượng với 8 bước chuyển
DOCTYPE html>
Hướng dẫn sử dụng Fontawesome 5 | kentrung
Kết quả
09. Xoay và lật các biểu tượng
Sử dụng lớp
DOCTYPE html>
Hướng dẫn sử dụng Fontawesome 5 | kentrung
Kết quả
10. Biểu tượng xếp chồng lên nhau
Để ghép hai biểu tượng, ta sử dụng lớp
//fontawesome.com/v5/search?q=user&m=free
Kết quả
11. Biểu tượng có chiều rộng cố định
Các icon có độ rộng khác nhau nên ta sử dụng lớp
Kết quả
12. Các biểu tượng có viền + kéo
Lớp ________ 180, ________ 181 hoặc ________ 182 cho dấu trích kép hoặc biểu tượng bài viết
Kết quả
13. [Nâng cao] Phần tử giả CSS
Với một vài dự án đôi khi chúng ta không thể thêm biểu tượng trực tiếp vào HTML được nhưng không sao vẫn có cách thêm bằng CSS. CSS có một tính năng mạnh mẽ được gọi là Pseudo-element. Font Awesome đã tận dụng yếu tố pseudo-element
Các bước thực hiện
- Thiết lập css chung cho tất cả các biểu tượng
- Specify font-family tương ứng với từng kiểu, Font Awesome có 5 kiểu trong đó 2 kiểu miễn phí là Solid và Brands còn 3 kiểu pro [trả phí] là Regular, Light và Duotone. Xem bảng bên dưới để tìm giá trị
- Specify font-weight tương ứng với từng kiểu, xem bảng bên dưới để tìm giá trị
- Xác định Unicode tương ứng cho biểu tượng bạn muốn, xem bảng cheatsheet để tìm giá trị
Ví dụ
Kết quả
14. [Nâng cao] Phông chữ tối ưu Tuyệt vời với IcoMoon
Phông chữ tuyệt vời 5 hỗ trợ trên 1600 biểu tượng miễn phí, tuy nhiên nếu bạn chỉ muốn sử dụng khoảng 10 đến 20 biểu tượng trong đó. thì bạn vẫn phải tải xuống toàn bộ kiểu của Phông chữ tuyệt vời, điều này cho kết quả thực tế là chưa tối ưu. Một câu hỏi đặt ra là làm sao mình vẫn sử dụng được Font Awesome mà chỉ cần tải về style của những icon mình dùng?