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ích Hợp Live Chat Facebook Messenger Vào Website
Kiểm Tra Thông Tin Form Với Bootstrap Validator
Custom Select Box CSS Only

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.

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

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é.

<link href="/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

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.

<i class="fa <strong>fa-bluetooth</strong>" aria-hidden="true"></i>

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