Trước đây để tạo các icon đó ta phải thực hiện cắt chúng ra từ file PSD và dùng CSS để gán background hoặc dùng thẻ img để đưa icon đó vào. Tuy nhiên hiện nay chúng ta đã có giải pháp khác đó là sử dụng Symbol Font (font chữ kiểu ký hiệu). Hiện nay có nhiều thư viện Symbol Font nhưng mạnh nhất và hay sử dụng nhất là Font Awesome vì nó đơn giản và dễ sử dụng.
Bộ Font Awesome Free/Pro cho Website mới nhất
Font Awesome được xây dựng thành nhiều định dạng file font khác nhau như file otf, eot, ttf, woff, svg, … Vì vậy bạn dễ dàng đưa vào sử dụng và hầu hết các hệ điều hành máy tính hiện nay đều chạy được.Ngoài các icons thông thường ra thì bạn có thể tạo các icons động bằng cách kết hợp với CSS3.
Nếu bạn sử dụng Bootstrap để xây dựng CSS cho website thì sẽ dễ dàng nhận thấy sự cần thiết của Font Awesome bởi vì chúng kết hợp với nhau khá là tốt và tạo ra các sản phẩm khá là bắt mắt.
Hướng dẫn sử dụng Font Awesome
- Vào trang chủ Font Awesome để tải bản free hoặc mua luôn bản full. Chúng ta sử dụng thư mục web-font-with-css nhé. Hoặc bạn tải gói Fontawesome Pro phía dưới.
- Thêm font-awesome vào file html bằng cách thêm thẻ link vào thẻ head, chỉ đường dẫn đến all.css
<link rel="stylesheet" type="text/css" href="icon/css/all.css">
- Vào mục Icon, tìm icon mà mình muốn dùng.
- Chọn vào icon muốn dùng, copy tên class và sử dụng.
Phiên bản
- 6.5.2
- Released April 1, 2024
- Added
- Crowned our new Web Awesome brand iconWaved our new Font Awesome brand icon
- Finally added the new Bluesky brand icon
- Added a new commissioned JXL for Jira brand icon
- A batch of new icons, including: caduceus, gluten-free, and reflect-both icons
- Signaled a new circle-wifi and commissioned circle-wifi-group icons
- New commissioned file-cad, ant, and baby bottle icons
- Locked in some table-related icons, including: table-cells-lock, table-cells-column-lock, and table-cells-row-lock
- Changed
- Updated the Kickstarter brand icon
- Updated the Upwork brand icon
- Fixed
- Fixed an issue where calendar-lines in Sharp Regular wasn't actually sharp
- Fixed the duotone styling of printer, fax, and shredder
- Fixed spacing in the location-check icon
- Fixed an issue with the SVG of face-kiss-beam
- Filled in some missing icons in the arrow-to/from-bracket icon series
- Update the TypeScript definition for Library.add() to allow an array of icon defintions
- Animation CSS custom property --fa-rotate-by now has a correct default value of 0
- Fixed some Less variable issues with --fa-bounce