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 icon miễn phí, rất dễ dàng để tích hợp vào website, công việc của bạn bây giờ là lựa chọn icon và copy paste. Font Awesome có bản miễn phí và bản trả phí, tuy nhiên bạn chỉ cần dùng bản miễn phí là đủ để làm đẹp cho website của mình.
01. Demo
- Link thư viện: //fontawesome.com/v5/search
- Danh sách icon bản miễn phí: //fontawesome.com/v5/search?m=free
02. Cài đặt
Cách 1: Sử dụng link CDNCDN
//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 với link CDN
Đối với thư viện tải về, ta giải nén và link tới file all.min.css
Mẫu HTML cơ bản
DOCTYPE html>
Hướng dẫn sử dụng Fontawesome 5 | kentrung
04. Cách tìm icon và sử dụng
Các bạn lên trang web của họ có liệt kê toàn bộ icon, tìm tên icon bằng tiếng anh, ở đây mình tìm các icon của useruser
//fontawesome.com/v5/search?q=user&m=free
Click chọn icon bạn thấy thích, ở đây mình chọn icon user-tag, để sử dụng bạn chỉ cần copy đoạn code vào trang web là xong.user-tag, để sử dụng bạn chỉ cần copy đoạn code vào trang web là xong.
- Tên icon
- Kiểu icon và prefix
- Mã unicode
- Mã html
- Tag loại nhóm
- Phiên bản hỗ trợ
- Nếu là:
3 thì là bản PRO trả phí mới dùng được
05. Color Icons
Thay đổi màu sắc của icon
Kết quả:
06. Sizing Icons
Sử dụng các class
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
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
Kết quả:
06. Sizing Icons
Sử dụng các class
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
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
List Item
List Item
List Item
Kết quả:
06. Sizing Icons
Sử dụng các class
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
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
Kết quả:
06. Sizing Icons
Sử dụng các class
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
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
Kết quả:
06. Sizing Icons
Sử dụng các class
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
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
Kết quả:
06. Sizing Icons
Sử dụng các class
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
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
07. Icon in a List
- Sử dụng class
6 vàDOCTYPE html> Hướng dẫn sử dụng Fontawesome 5 | kentrung
7 để thay thế style mặc định của ulDOCTYPE html> Hướng dẫn sử dụng Fontawesome 5 | kentrung - 08. Animating Iconsfont-family tương ứng cho mỗi kiểu, Font Awesome có 5 kiểu trong đó 2 kiểu free 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ị.
- Sử dụng class
8 để xoay tròn icon liên tục.font-weight tương ứng cho mỗi kiểu, xem bảng bên dưới để tìm giá trị.DOCTYPE html> Hướng dẫn sử dụng Fontawesome 5 | kentrung - Sử dụng class
9 để xoay tròn icon với 8 bước di chuyển.Unicode tương ứng cho icon bạn muốn, xem bảng cheatsheet để tìm giá trị.DOCTYPE html> Hướng dẫn sử dụng Fontawesome 5 | kentrung
| 11. Fixed-Width Icons | Các icon có độ rộng khác nhau nên ta sử dụng class | 900 | 12. Bordered + Pulled Icons |
Class | Các icon có độ rộng khác nhau nên ta sử dụng class | 400 | 12. Bordered + Pulled Icons |
Class | 13. [Advanced] CSS Pseudo-elements | 400 | Với một vài dự án đôi khi chúng ta không thể thêm icon 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 | 13. [Advanced] CSS Pseudo-elements | 300 | Với một vài dự án đôi khi chúng ta không thể thêm icon 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 | 13. [Advanced] CSS Pseudo-elements | 900 | Với một vài dự án đôi khi chúng ta không thể thêm icon 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ả icon
Xác định font-family tương ứng cho mỗi kiểu, Font Awesome có 5 kiểu trong đó 2 kiểu free 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ị.
Xác định font-weight tương ứng cho mỗi kiểu, xem bảng bên dưới để tìm giá trị.
Xác định Unicode tương ứng cho icon bạn muốn, xem bảng cheatsheet để tìm giá trị.
- //completejavascript.com/toi-uu-font-awesome-voi-icomoon
- //viblo.asia/p/tao-icon-font-voi-icomoon-WAyK8e1eZxX
- Style
- Availability
- Solid