Thư Viện Icon Font Chữ Fontawesome Giúp Thiết Kế Website

Thư Viện Icon Font Chữ Fontawesome Giúp Thiết Kế Website

Không còn những ngày cắt icon trên photoshop khổ sở nữa. Thư viện Icons font chữ Fontawesome tổng hợp 634 icon thịnh hành nhất hiện nay. Icon font Fon...

Tổng Hợp CSS3 Loading Animation Tuyệt Đẹp Phần 1
[PHP Basic] Bài 03: Cú Pháp Cơ Bản Trong Lập Trình Code PHP (Tag PHP)
[PHP Basic] Bài 05: Chuỗi Và Hàm Xử Lý Chuỗi Trong PHP

Không còn những ngày cắt icon trên photoshop khổ sở nữa. Thư viện Icons font chữ Fontawesome tổng hợp 634 icon thịnh hành nhất hiện nay. Icon font Fontawesome giúp bạn chèn các icon vào trong trang web của bạn một cách dể dàng, nhanh, gọn lẹ mà không cần phải mất thời gian để thiết kế icon.

Với version 4.6.3 thư viện Icon fontawesome đã sở hữu 634 được dùng nhiều nhất hiện nay. Đặc biệt với kích thước nhỏ gọn 587.11 KB các bạn đã có một thư viện icon lớn nhất hiện nay.

I. Ưu điểm của thư viện Icon fontawesome

  1. Nhỏ gọn nhẹ (587.11 KB)
  2. Tích hợp vào website đơn giản
  3. Sử dụng dẻ dàng
  4. Icon đẹp và zoom lớn không bị bẻ nét
  5. Update version liên tục

II. Sử dụng và tích hợp thư viện Icon fontawesome vào website

1. Tích hợp thư viện icon fontawesome

Có hai cách để tích hợp thư viện icon fontawesome vào website của mình, để giảm liêu đến server của bạn, bạn nên chèn cách 1 nhé.

Cách 1: Chèn trực tiếp link thư viện server icon fontawesome.

Cách này sẻ giảm thiều băng thông cho website bạn rất nhiều. Vì hiện tại chúng ta dang dung kế thư viện icon fontawesome online.

Cách 2: tải thư viện icon fontawesome về project của mình.

Các bạn vào trang chủ của icon fontawesome để tài về nhé: http://fontawesome.io/ và click vào button Download để tải file .zip về

thu-vien-icon-font-chu-fontawesome-01

Giải nén file zip ra chúng ta các thư mục và file như hình bên dưới.

thu-vien-icon-font-chu-fontawesome-02

Sau đó bạn copy luôn cả Folder font-awesome-4.6.3 vào thư viện skin mà bạn muôn để. Còn Mình để vào folder lib/font-awesome-4.6.3/

Và bạn chèn link này vào trong thẻ <head></head> website. Nhớ phải đúng đường dẫn của bạn để thư viện này nhé.

2. Cách sử dụng thư viện icon fontawesome

Để sự dụng icon font chữ icon fontawesome bạn chỉ cần thêm đoạn code html này vào những chỗ bạn muốn hiến thi và thay đổi tên class để hiện thị hình icon mông muôn.

Link demo: icon bluetooth

Ngoài ra bạn có thể lên trang chủ của icon fontawesome để tìm kiếm tên icon và hình icon một cách dẻ dàng nhé.

Bình Luận