Font Awesome – Đơn giản hóa việc chèn icon vào trang web

Có một sự “khổ sở” khá kinh dị 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ị đúng vị. 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à ám chỉ các bộ icon được thiết kế dưới dạng Symbol Font. Tức là font chữ ở dạng ký hiệu tương tự như font Wedding có trong phần mềm soạn thảo văn bản MS Word đình đám. Sau đó được chèn vào trang web dưới dạng font chữ thông qua thuộc tính @font-face của CSS3. Vì vậy ta chỉ cần nhúng một lần đã có thể sử dụng tất cả các icon có trong đó. Thật quá tuyệt vời đúng không nào?

Ngoài ra, các icon được thiết kế dựa trên đồ họa vector nên nó có thể hiển thị sắc nét dù cho ta có phóng to như thế nào đi nữa. Và một điều nữa là ta có thể dễ dàng đặt nó ở bất kỳ đâu trên trang web cũng như thay đổi bất kỳ màu sắc nào cho nó chỉ với các kiến thức HTML và CSS hết sức cơ bản? Giới thiệu dài dòng quá, giờ ta sẽ đi ngay vào tìm hiểu một Web Font Icon nào đó cho các bạn dễ hình dung hơn nữa nhé. Và bộ Web Font Icon mà tôi muốn giới thiệu cho các bạn đó chính là Font Awesome.

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:

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

Đầu tiên là nhúng tập tin css của Font Awesome vào trong website của bạn (lưu ý phiên bản hiện tại tại thời điểm của bài viết này là 4.6.3, các bạn nên truy cập trang chủ của Font Awesome để cập nhật các phiên bản mới nhất)

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css” />

Truy cập vào http://fontawesome.io/icons/ và lựa chọn icon để sử dụng, để ý tên của icon đó, ví dụ với icon có tên là anchor chẳng hạn, để hiển thị ta sẽ viết như sau:

<i class=”fa fa-anchor”></i>

Và đây chính là kết quả:

Thay đổi màu sắc cho icon trong Font Awesome

Mặc định, nó có màu đen. Để thay đổi màu sắc cho nó, các bạn có thể sử dụng CSS. Việc này cũng khá đơn giản, như ví dụ này chẳng hạn:

<i class=”fa fa-anchor” style=”color: #2980b9;”></i>

Và hãy cùng xem kết quả:

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

Vậy là từ giờ trở đi, các bạn không còn phải lo lắng về việc trang trí trên website của mình nữa. Vì với Font Awesome mọi chuyện thật là dễ dàng đúng không nào? Ngoài Font Awesome ra, còn khá nhiều các trang web cung cấp các bộ web font icon độc đáo khác như IcoMoon, Typicons, Material icons, Fontello,… Nếu bạn tìm hiểu hết các bộ font icon này, bạn có thể sẽ cần nhờ đến Glyph Search. Đây là website cung cấp chức năng tìm kiếm và copy nhanh mã HTML của các loại font icon phổ biến.

Lạc đề một chút, thật ra CiOne cũng đang áp dụng bộ Font Awesome để trang trí nữa đấy. Giờ đến lượt bạn áp dụng nó vào trong project của mình rồi.