Font Awesome: Bộ Công Cụ Icon SVG, Font, CSS
Font Awesome là thư viện và bộ công cụ icon đóng gói cùng một bộ icon dưới dạng file SVG, webfont, và class CSS, hiện ở phiên bản chính 7. Hãy chọn Font Awesome nếu bạn muốn một chính sách versioning được ghi rõ và cách chia giấy phép theo từng loại file (CC BY 4.0, SIL OFL 1.1, MIT) có thể kiểm tra trước khi dùng; bỏ qua nếu bạn cần hướng dẫn cài đặt ngay trong repo, vì README dẫn thẳng sang trang docs bên ngoài cho phần cài đặt và sử dụng.
Font Awesome Là Gì?
Font Awesome là thư viện và bộ công cụ icon do FortAwesome duy trì, đóng gói cùng một bộ icon dưới dạng file SVG, một webfont, và các class CSS để dự án không bị bó buộc vào một cách tích hợp duy nhất. README nói rằng lượng người dùng trải rộng qua các công việc thiết kế, phát triển, và tạo nội dung, lên tới hàng triệu người dù không nêu con số chính xác. Dự án hiện đang ở phiên bản chính 7.
Tính Năng Và Nội Dung Cốt Lõi
- ✓Phân phối dưới dạng file SVG, webfont, và CSS cùng nhau, nên cùng một bộ icon có thể dùng qua SVG nhúng trực tiếp, glyph webfont, hay class CSS tuỳ nhu cầu dự án.
- ✓Phiên bản 7 là bản hiện hành; Font Awesome theo Semantic Versioning với vài điểm khác biệt được README nêu rõ, trong đó một bản minor được phép chứa thay đổi không tương thích ngược miễn là UPGRADING.md ghi rõ hướng dẫn.
- ✓Phiên bản 6 ở chế độ Long Term Support, chỉ còn nhận bản vá lỗi nghiêm trọng, còn các phiên bản 3, 4, và 5 đã end-of-life, không còn kế hoạch phát hành thêm.
- ✓Ba giấy phép khác nhau áp dụng cho bản tải Free tuỳ loại file: CC BY 4.0 cho file icon SVG/JS, SIL OFL 1.1 cho file font, và MIT cho phần còn lại.
- ✓Các file Free tải về đã có sẵn comment attribution nhúng bên trong, nên việc dùng bình thường không cần bạn tự thêm dòng ghi công.
- ✓Các topic trên repo gắn liền với svg-icons và svg-sprites, nghĩa là bộ icon được phân phối dưới dạng vector có thể phóng to thay vì chỉ ảnh bitmap kích thước cố định.
- ✓Có sẵn CODE_OF_CONDUCT.md và CONTRIBUTING.md công khai, cùng lịch sử phát hành được ghi lại (fontawesome.com/versions, GitHub Releases, và changelog trên trang riêng), giúp dự án có căn cứ rõ ràng để theo dõi quản trị và thay đổi.
Bắt Đầu Với Font Awesome Như Thế Nào
README của Font Awesome không đưa ra lệnh cài đặt copy-paste được; nó trỏ sang trang docs phiên bản 7 tại fontawesome.com/docs thay vì liệt kê ngay trong repo. Nếu bạn đang nâng cấp từ bản cũ, README dẫn tới một hướng dẫn nâng cấp cho web và một hướng dẫn riêng cho desktop, thay vì gộp các bước đó vào README. Ngoài hai đường link này, tên package manager, đoạn mã CDN, hay cách setup kit-code đều không được nêu rõ trong các dữ kiện có ở đây.
Sử Dụng Font Awesome Trong Dự Án
Cách bạn thực sự chèn một icon vào markup sau khi cài — tên class CSS, cú pháp nhúng SVG, cách webfont dự phòng hoạt động — không được README mô tả; chi tiết đó nằm trên trang docs bên ngoài mà README dẫn tới. Điều README xác nhận liên quan đến sử dụng là cùng một bộ icon có sẵn qua cả ba định dạng phân phối, nên cú pháp bạn viết hàng ngày phụ thuộc vào định dạng bạn chọn lúc cài đặt.
Điểm mạnh
- ✓Điều khoản giấy phép được ghi rõ theo từng loại file thay vì một câu chung chung — CC BY 4.0 cho icon, SIL OFL 1.1 cho font, MIT cho mã nguồn — nên bạn biết chính xác điều khoản nào áp dụng cho thứ mình dùng.
- ✓Có đầy đủ tài liệu quản trị dự án: CODE_OF_CONDUCT.md, CONTRIBUTING.md, và changelog được duy trì trên trang riêng của dự án, nhiều hơn phần lớn bộ icon khác công bố.
- ✓Icon không bị bó vào một cách tích hợp duy nhất — file SVG, một webfont, và class CSS đều nằm trong cùng gói tải về.
- ✓Phiên bản major cũ không bị cắt đột ngột: phiên bản 6 vẫn nhận bản vá lỗi nghiêm trọng ở chế độ LTS thay vì bị bỏ ngay khi phiên bản 7 ra mắt.
- ✓Chính sách versioning đưa ra cam kết cụ thể hơn SemVer thông thường, như không cố tình phá vỡ khả năng tương thích ngược ở bản patch, và không bao giờ xoá icon ở bản minor hay patch.
Tìm Hiểu Chính Sách Versioning Của Font Awesome
- △Chính sách versioning của Font Awesome nới lỏng SemVer chuẩn ở vài điểm rõ ràng — một bản minor được phép chứa thay đổi không tương thích ngược, nên tăng số minor không tự động an toàn nếu chưa đọc UPGRADING.md.
- △Phiên bản 6 giờ chỉ còn nhận bản vá lỗi nghiêm trọng, còn phiên bản 3, 4, và 5 đã end-of-life, không còn kế hoạch phát hành thêm, nên giữ một phiên bản major cũ đồng nghĩa với việc không còn hỗ trợ nào.
- △Cả cài đặt lẫn cách sử dụng hàng ngày đều không được nêu trong chính README; cả hai đều dẫn sang trang fontawesome.com/docs bên ngoài, nên bạn phải rời repo mới tìm được các bước thực tế.
- △Ba giấy phép khác nhau áp dụng tuỳ loại file (icon theo CC BY 4.0, font theo SIL OFL 1.1, mã nguồn theo MIT), nghĩa là phải kiểm tra nhiều hơn một giấy phép nếu dự án dùng nhiều loại file.
- △Dữ kiện GitHub có ở đây không cho thấy một trường license duy nhất cho repo, nên ai quét dependency để tìm một mã giấy phép rõ ràng sẽ không có câu trả lời gọn tự động.
Các Lựa Chọn Thay Thế Cho Thư Viện Icon
Câu Hỏi Thường Gặp
Font Awesome Free được cấp phép cho cả dự án thương mại lẫn dự án mã nguồn mở, theo README, vốn mô tả bản Free là mã nguồn mở và thân thiện với các dự án dùng giấy phép GPL.
Font Awesome chia giấy phép theo loại file: file icon SVG và JS theo CC BY 4.0, file font theo SIL OFL 1.1, còn phần còn lại (không phải font, không phải icon) theo MIT.
README của Font Awesome dẫn tới hai tài liệu riêng cho việc nâng cấp — một hướng dẫn cho web và một hướng dẫn cho desktop, cả hai đều trên docs.fontawesome.com — thay vì liệt kê các bước ngay trong README.
Phiên bản 7 là bản hiện hành, phiên bản 6 ở chế độ Long Term Support chỉ nhận bản vá lỗi nghiêm trọng, còn phiên bản 3, 4, và 5 đã end-of-life và không còn kế hoạch phát hành thêm, theo README.
Font Awesome phân phối icon dưới dạng file SVG và một webfont đi kèm class CSS, đúng như cách dự án tự mô tả mình: gồm SVG, webfont, và CSS cùng nhau.
Vấn đề Font Awesome giải quyết
Muốn icon đồng nhất trên toàn bộ dự án web thường có nghĩa là quản lý cả đống file ảnh riêng lẻ — nhiều kích thước cho màn hình retina, nhiều biến thể màu, sprite sheet rắc rối — hoặc tự xây một bộ SVG từ đầu. Font Awesome tự định vị mình là bộ công cụ gồm SVG, một webfont đi kèm, và CSS, gộp lại thành một gói, nghĩa là bộ icon chỉ cần phát hành một lần rồi được dùng qua bất kỳ cách tích hợp nào (thẻ SVG, glyph webfont, class CSS) phù hợp với dự án, thay vì mỗi team phải tự giải quyết việc phân phối icon từ đầu.
Trường hợp sử dụng tốt nhất
- •Đổi định dạng icon giữa chừng dự án — SVG để nét rõ khi phóng to, webfont cho các cách render cũ, hay class CSS để chèn nhanh vào markup — mà không phải đổi bộ icon.
- •Xem lại chính sách versioning trước khi ghim dependency, vì README nêu rõ khi nào một bản minor được phép gây thay đổi không tương thích và khi nào không.
- •Nâng cấp dự án còn dùng Font Awesome 4 hay 5 (đã end-of-life), theo hướng dẫn nâng cấp riêng cho web và desktop để lên phiên bản 7.
- •Kiểm tra nghĩa vụ giấy phép theo từng loại file trước khi phát hành — CC BY 4.0 cho file icon, SIL OFL 1.1 cho file font, MIT cho phần còn lại.
- •Đóng góp cho bộ icon hoặc báo issue theo quy trình đã ghi rõ trong CONTRIBUTING.md và CODE_OF_CONDUCT.md.
Ai nên dùng — và ai nên bỏ qua
Hãy thử Font Awesome nếu bạn muốn một bộ icon có chính sách versioning và giấy phép được ghi rõ để kiểm tra trước khi dùng, và bạn không ngại tra thêm trang docs bên ngoài để biết cách cài đặt và sử dụng vì README không nêu trực tiếp. Bỏ qua nếu bạn cần hướng dẫn cài đặt copy-paste ngay trong repo, hoặc bạn không muốn đọc UPGRADING.md trước mỗi lần tăng bản minor, đúng như README tự thừa nhận là bản minor có thể phá vỡ thứ gì đó.
Repo liên quan
Chưa chắc Font-Awesome có hợp với bạn?
Để ChatGPT, Claude hoặc Perplexity tìm hiểu giúp — bấm bên dưới và xem AI nói gì về Font-Awesome.