Cách cài đặt thư viện Font Awesome miễn phí vào website

2021-07-15 11:16:32 Admin

Font Awesome là một thư viện Icon rất phổ biến với nhiều lập trình viên Front-End do: bạn được sử dụng nhiều Icon miễn phí, dễ sử dụng và cài đặt. Hiện có 2 version sử dụng phổ biến cho các lập trình viên: Version 4.7.xVersion 5.1.x.

Tuy nhiên với các bạn lập trình viên Front-End mới có thể sẽ chưa biết cách cài đặt thư viện Icon này để sử dụng cho giao diện webiste của mình.

Bài viết dưới Thietkeweb3s sẽ hướng dẫn bạn cách cài đặt thư viện Font Awesome cho giao diện webiste của bạn.

1. Tải thư viện Font Awesome

Để tải thư viện Font Awesome bạn hãy vào trang chủ của thư viện này để tải nhé.

- Link tải bản 5.1.x:

https://fontawesome.com/v5.15/

- Link tải bản 4.7.x:

https://fontawesome.com/v4.7/get-started/

2. Cách cài đặt thư viện Font Awesome

Để cài đặt thư viện, trước tiên bạn cần tải thư viện này về hoặc có thể dùng trực tiếp bằng cách nhúng link trên thẻ Head

Cài đặt Font Awesome dùng với link CDN 

- Bản 5.1.x:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

- Bản 4.7.x:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Cài đặt qua link CDN nhanh nhưng sẽ không tốt cho webiste. Mình không khuyến khích dùng cách này. Hãy sử dụng cách dưới nhé.

Cài đặt Font Awesome bằng cách Download thư viện

Bạn hãy tải thư viện về theo đường link ở mục 1 nhé. 

Sau khi tải về, bạn hãy giải nén file vừa tải và cho vào trong giao diện website mình cần dùng.

Như mình thường để theo đường dẫn:

public/assets/libs

Tất cả các thư viện dùng cho webiste mình sẽ để riêng ở folder libs đễ quản lý.

Tiếp theo bạn thêm thư viện này vào trong webiste trên thẻ head:

assets/libs/font-awesome/font-awesome.min.css

Vậy bây giờ là đã cài đặt xong. bây giờ là sử dụng thôi nhé.

3. Cách sử dụng thư viện Font Awesome

- Sau khi cài đặt xong thư viện vào website của bạn. Giờ là việc sử dụng.

- Để sử dụng bạn cần vào trang của Font Awesome để tìm Icon phù hợp nhé.

Lưu ý: Sử dụng phiên bản nào thì bạn hãy dùng Icon của phiên bản đó nhé, nếu không sẽ bị lỗi không hiển thị được.

Link chọn Icon Font Awesome cho bản 5.1.x:

https://fontawesome.com/v5.15/icons?d=gallery&p=2

Link chọn Icon Font Awesome cho bản 4.7.x:

https://fontawesome.com/v4.7/icons/

- Để tìm nhanh icon bạn cần tìm hãy gõ từ khóa ở đây nhé:

- Chọn được Icon phù hợp bạn click vào Icon đấy -> sau đó bạn Copy

Paste vào giao diện website chỗ bạn cần

Bây giờ hãy xem thành quả nhé:

 

 

 

Bài viết nổi bật

Hãy thiết kế website chuyên nghiệp vì 9 lý do này!
2021-06-27 03:10:00 Tin tổng hợp

Bạn đã bao giờ thử nghĩ khi khách hàng muốn tìm hiểu thông tin về doanh nghiệp, thương hiệu của ...

Cách đưa icon Fontawesome vào trình soạn thảo TinyMce
2021-06-27 03:45:52 Kiến thức Website

Fontawesome là một thư viện Icon rất quen thuộc với các bạn lập trình viên. Nó cung cấp rất nhiều ...

Bài viết mới nhất

Lộ trình 15 bước trở thành Web Developer 2022 với những công nghệ tiên tiến nhất
2021-12-11 17:16:27 Kiến thức Website

Ngắn gọn và đẩy đủ là mục đích của bài viết này. Trong bài viết này, một lập trình viên giàu kinh ...

Các Font chữ Tiếng Việt cho thiết kế website
2021-08-17 16:19:25 Kiến thức Website

Bạn là người thiết kế website, bạn cần biết nhiều loại font chữ dành cho website để phục vụ khách ...

Phần mềm thiết kế website chuyên nghiệp miễn phí cho người không chuyên
2021-07-23 12:05:09 Tin tổng hợp

Với các bạn biết sử dụng Photoshop, Ai, Pr thiết kế website trở lên quá dễ dàng không gặp khó khă ...

Những lưu ý quan trọng cho khách hàng trước khi làm Website
2021-07-03 19:24:50 Tin tổng hợp

Khi bắt đầu làm website phục vụ cho mục đích của mình, các bạn cần chú ý các vấn đề sau, để tránh ...

SSL là gì? Chứng chỉ SSL là gì? Chúng hoạt động như thế nào?
2021-06-27 20:53:04 Kiến thức Website

SSL là một giao thức quan trọng không thể thiếu khi bạn thiết kế, sử dụng website. Nhưng không ...