Download và cách sử dụng font awesome tạo icon cho website

(Font Awesome) Tạo icon cho web giúp khách hàng tiếp cận và hiểu rõ hơn nội dung của link được liên kết khá quan trọng, khi add các icon thường khó khăn vì phải lên mạng download về và cắt gép khiến nhiều lập trình viên bực mình.

Nay itseovn hướng dẫn các bạn cách tạo icon cho web bằng Font Awesome chuyên nghiệp.

Gắn icon tại Font Awesome cho web salegiatot.com



List icon tại Font Awesome
​

Bước 1: download phiên bản mới nhất của Font Awesome tại 1 trong 2 link dưới:

• Download tại trang chủ, bằng cách truy cập trang chủ link dưới.

Mã:

http://fontawesome.io

• Tiếp theo ấn Download như hình dưới.

​

• Tiếp theo chọn : No thanks, just download Font Awesome

​

• Hoặc Download tại ITSEOVN phiên bản Font Awesome 4.6.3 mới nhất 2016 link dưới.

Mã:

https://itseovn.com/i/file/font-awesome-4.6.3.zip

Bước 2: Cài đặt Font Awesome cho web.

• Download về xong bạn giải nén ra và copy 2 folder "css" và "fonts" vào thư mục gốc của web.
• Sau đó bạn vào file code cần chạy khai báo như sau:

Mã:

Đối với code asp.net: <link rel="stylesheet" href="<%=  ResolveUrl("~/") %>css/font-awesome.min.css" />

Mã:

Đối với code PHP: <link rel="stylesheet" href="../css/font-awesome.min.css" />

Bước 3: Cách sử dụng Font Awesome.

• Truy cập vào trang chủ icon của Font Awesome để tìm kiếm icon cần gắn.

Mã:

http://fontawesome.io/icons

• Tại đây bạn điền tên icon bạn cần gắn như số 1 ở dưới: VD mình tìm icon home.
• Sau đó bạn click vào icon home nếu có như hình số 2 ở dưới.

​

• Khi click vào icon Home bạn sẽ có 1 đoạn code, bạn chỉ cần copy hêt đoạn code đó cho vào web, nơi bạn cần hiển thị icon là được.

Mã:

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

• Demo là hình trên cùng nhé.

​