CSS3 13 – Icon Font trong CSS với FontAwesome

0
534

Có một sự khó khăn nếu như bạn nào đã tìm hiểu qua kỹ thuật CSS Image Sprites. Đó là các icon ảnh phải được chèn chính xác từng pixel nếu không muốn hiển thị sai vị trí. Hoặc đau đầu hơn là khi phải cắt thật chính xác các icon có trong file giao diện PSD mẫu. Nhưng chuyện đó giờ đã là dĩ vãng! Web Font Icon sẽ giúp bạn làm điều này một cách đơn giản hơn bao giờ hết. Vậy thì chính xác Web Font Icon là gì? Nó có liên quan gì đến Font Awesome.

Web Font Icon là gì?

Hiểu đơn giản, Web Font Icon là những font ký tự, biểu tượng, ký hiệu. Bạn sẽ gặp những font này trong MS Office nếu windows của bạn có cài các font như Windings, Symbols, … thay vì các ký tự a, b, c, …

Số lượng icon trong bộ font này khá khủng và được thiết kế rất tỉ mỉ. Nhờ có CSS3 mà việc chèn Font ngoài vào web trở nên rất dễ dàng và đơn giản.

Bài này mình sẽ hướng dẫn các bạn cách cài đặt và sử dụng thư viện lấy Font Icon đó là FontAwesome.

Ưu điểm của icon font

Icon font ngày được sử dụng rộng rãi trong các website hiện nay. Icon font mang nhiều ưu điểm:

  • Giảm số lượng HTTP Request, giúp website của bạn load nhanh hơn.
  • Dễ dàng thay đổi màu sắc, kích thước của biểu tượng.
  • Cung cấp nhiều biểu tượng phù hợp giúp bạn tiết kiệm thời gian thiết kế.
  • Có thể sử dụng CSS3 như transition, transform, text-shadow giúp các icon được linh hoạt hơn.
  • Phóng to thu nhỏ dễ dàng
  • Các trình duyệt phổ biến đều hỗ trợ
  • Kích thước file nhỏ gọn

Font Awesome là gì?

Font Awesome là bộ icon với hơn 600 icon dùng để trang trí website được tạo và phát triển bởi Dave Gandy. Hầu hết các icon mà bạn muốn dùng để trang trí website đều có ở đây. Cách sử dụng khá đơn giản, các bạn có thể vào trang chủ của nó tại đây để tải về và tự cài đặt. Hoặc sử dụng theo hướng dẫn dưới đây:

Icon Font trong CSS với FontAwesome

Hướng dẫn cài đặt Font Awesome

Đầu tiên, các bạn tải thư viên này tại địa chỉ: https://fontawesome.com/?from=io

Lưu ý là tải phiên bản dành cho Web nhé.

Sau khi download, giải nén ra, các bạn thu được 1 thư mục, bên trong thư mục này các bạn cần quan tâm tới:

  • Thư mục css, bên trong có 2 file .css là fontawesome.css (file dùng để phát triển thêm, file này được viết rành mạch) và fontawesome.min.css (file được nén để tiết kiệm dung lượng).
  • Thư mục webfonts, chứa các font icon sẽ được sử dụng.

Tiếp theo, các bạn tiến hành chèn thư viện vào phần <head> của web, như sau:

Sau khi có thư viện, chúng ta sẽ thử sử dụng để lấy ra 1 font icon xem sao, như sau:

Ở đây mình sử dụng file CSS nén để bớt gánh nặng cho website. Bạn thấy ví dụ trên, mỗi biểu tượng tạo bởi thẻ i và icon xác định bởi class class="fa fa-flag". Đoạn mã trên cho ra biểu tượng hình lá cờ cạnh dòng chữ “Chào Fontawesome”, vậy làm sao ta biết được icon này có hình lá cờ?

Bạn truy cập vào mục Icons và search tìm tới flag như sau:

Icon Font trong CSS với FontAwesome 02

Cấu trúc sử dụng

Tên class có cấu trúc:

Đổi tên icon bạn tìm được trong danh sách là ok, khi load web bạn sẽ thấy hiển thị với icon đó.

Quá đơn giản và tiện lợi! Ngoài ra, các bạn cũng có thể tham khảo bảng thống kê các icon qua địa chỉ này. Hoặc các bạn có thể xem qua phần Example để thấy được sự lợi hại của bộ font icon này. Các bạn sẽ thấy nó hỗ trợ ta đến mức độ nào, khá đúng với cái tên “awesome”!

Kết luận

FontAwesome bố trí các icon theo từng nhóm. Với sự hỗ trợ của FontAwesome bạn có thể tạo ứng dụng web thực thụ với các Icon phong phú rồi nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây