CSS-CSS3


Home / Tài liệu CNTT / CSS-CSS3 / Sử dụng font Awesome css các icon đẹp nhanh chóng

Sử dụng font Awesome css các icon đẹp nhanh chóng

Nếu bạn làm Front end thường xuyên css thì font Awesome có thể đã quá quen thuộc với bạn, với việc cung cấp số lượng icon lớn gần như rất đầy đủ cho bạn sử dụng mà không cần nhờ đến thiết kế. Dưới đây là một vài thông tin giúp bạn biết các sử dụng font Awesome.

Font Awesome liên tục cập nhật các phiên bản để tăng số lượng icon mỗi phiên bản đều có bản Pro (Trả phí) và  bản MIỄN PHÍ sẽ giới hạn icon, tuy nhiên với bản miễn phí bạn cũng sử dụng rất thoải mái rồi. Vì vậy hướng dẫn này sẽ tập trung vào phiên bản MIỄN PHÍ.

Để sử dụng icon Free Font Awesome, bạn có thể chọn tải xuống thư viện Font Awesome hoặc bạn có thể đăng ký tài khoản tại Font Awesome và nhận mã (gọi là KIT CODE) để sử dụng khi bạn thêm Font Awesome vào web của mình trang.

Chúng tôi thích phương pháp KIT CODE hơn. Sau khi nhận được mã, bạn có thể bắt đầu sử dụng Font Awesome trên các trang web của mình bằng cách chỉ bao gồm một dòng mã HTML:

Dưới đây là ví dụ mình sử dụng Font Awesome phiên bản 5.0 sử dụng KIT CODE

Bạn có thể tải phiên bản Font Awesome mới nhất tại đây: https://fontawesome.com/download và đọc tài liệu hướng dẫn sử dụng các icon

Dưới đây là ví dụ mình sử dụng font Awesome 4.7 bằng các tải css về máy

Vì phiên bản 4.7 hiện không đăng tải trên trang chủ của Font Awesome nếu bạn muốn sử dụng bạn có thể tải file css dưới đây về và sử dụng:

Download: font-awesome-4.7.min.css