Hướng dẫn dùng plugin font awesome icons

Chào các bạn, web thiết kế trên mã nguồn wordpress nhiều các bạn hỏi mình muốn thêm các icon vào web như dùng hotline, địa chỉ, maps…như thế nào. Hôm nay Win Win Media cùng bạn đi giải quyết việc đó.

Hiện nay thì có 2 cách để chèn icon vào web 1 là dùng hình ảnh chèn bằng the img cách này khá phức tạp dùng cho những người hiểu về code web tý, và việc bất lợi là khi responsive chúng ta lại phải code lại mất rất nhiều thời gian.

Giải pháp thứ 2: Bạn dùng plugin thêm font Awesome vào web và việc chèn icon vào vô cùng nhanh tiện lợi, mặt khác nó phù hợp với hầu hết các trình duyệt hiện nay.

Font Awesome là là một thư viện chứa các font chữ ký hiệu hay sử dụng trong website. Font chữ ký hiệu ở đây chính là các icons mà ta thường hay sử dụng trong các layout website.

Font Awesome được xây dựng thành nhiều định dạng file font khác nhau như file otf, eot, ttf, woff, svg, … Vì vậy bạn dễ dàng đưa vào sử dụng và hầu hết các hệ điều hành máy tính hiện nay đều chạy được.

Thêm font Awesome vào web wordpress

Bước 1: Cài đặt: các bạn vào Plugins => chọn Add new rồi gõ từ khóa “Better Font Awesome”

Thêm font Awesome vào web wordpress

Sau đó bạn cài đặt và kích hoạt như những plugin khác.

Bước 2: Sử dụng Plugin Better Font Awesome

Thêm font Awesome vào web wordpress

Như vậy mình đã hướng dẫn bạn thêm Thêm font Awesome vào web giúp bạn thêm các icon vào web dễ dàng.

Ngoài cách này bạn còn có thể thêm bằng code, cách nay hơi hơi phức tạp hơn hẹn các bạn ở bài tiếp theo nhé.

Mời bạn xem thêm: Bỏ code không cần thiết ở Head trong worpress

Chúc bạn thành công !

Dịch vụ Thiết Kế Web chuyên nghiệp, lập trình App, Marketing Online, quảng cáo Google Ads, Facebook Ads, Zalo Ads...Video Marketing, SEO web, quản trị web, thiết kế logo, profile, catalogue...

Font Awesome 5 là một trong những icon font phổ biến nhất hiện nay, tại thời điểm viết bài 28/10/2020 với phiên bản 5.15.1 hỗ trợ trên 1600 icon miễn phí, rất dễ dàng để tích hợp vào website, công việc của bạn bây giờ là lựa chọn icon và copy paste. Font Awesome có bản miễn phí và bản trả phí, tuy nhiên bạn chỉ cần dùng bản miễn phí là đủ để làm đẹp cho website của mình.

Hướng dẫn sử dụng Font Awesome 5 bản miễn phí

Hướng dẫn sử dụng Font Awesome 5 bản miễn phí

01. Demo

• Link thư viện: https://fontawesome.com
• Danh sách icon bản miễn phí: https://fontawesome.com/icons?d=gallery&m=free

02. Cài đặt

Cách 1: Sử dụng link CDN

[crayon-656dcdb201cec008884524 inline\="true" class\=" language-none"]https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css [/crayon]

Cách 2: Tải thư viện về, chọn bản Free for Web

[crayon-656dcdb201cf1531971450 inline\="true" class\=" language-none"]https://fontawesome.com/download [/crayon]

Và một vài cách tải khác qua npm – yarn …

03. Thêm thư viện vào trang web

Đối với link CDN

[crayon-656dcdb201cf4845910344 inline\="true" class\=" language-html"]<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> [/crayon]

Đối với thư viện tải về, ta giải nén và link tới file all.min.css

[crayon-656dcdb201cf8041407246 inline\="true" class\=" language-html"]<link rel="stylesheet" href="fontawesome-free-5.15.1-web/css/all.min.css" /> [/crayon]

Mẫu HTML cơ bản

Hướng dẫn sử dụng Fontawesome 5 | kentrung

04. Cách tìm icon và sử dụng

Các bạn lên trang web của họ có liệt kê toàn bộ icon, tìm tên icon bằng tiếng anh, ở đây mình tìm các icon của user

https://fontawesome.com/icons?d=gallery&m=free

Hướng dẫn sử dụng Font Awesome 5 bản miễn phí

Click chọn icon bạn thấy thích, ở đây mình chọn icon user-tag, để sử dụng bạn chỉ cần copy đoạn code vào trang web là xong.