Hướng dẫn chèn icon Font Awesome 6 lên Website

Để cài đặt được icon font awesome 6 trước tiên bạn cần download về, đường link mình xin để bên dưới:

» https://fontawesome.com/download

Lựa chọn bản dành cho web, ở đây bạn có thể tải miễn phí hoặc dùng bản pro tùy theo mục đích sử dụng để tối ưu trang web của bạn.

Sau khi bạn tải về và giải nén, bạn sẽ có 1 thư mục đầy đủ css, js, webfonts,… Điều cần làm bây giờ là bạn chỉ cần tải lên theme chính của trang web và cài đặt đường dẫn.

Sau khi tải font awesome 6 lên thư mục gốc của theme, bạn chèn css vào trong thẻ <head> bạn có thẻ xem mẫu mình chèn ở bên dưới. Mình chèn file all.css của font awesome 6 vì hầu như nó đã gói gọn trong này.

Giờ bạn page icon của font awesome để tìm biểu tượng phù hợp chèn vào website.

» https://fontawesome.com/icons

Sau khi chọn được biểu tượng, bạn copy đoạn HTML sau đó dán vào phần muốn hiển thị.

Lưu ý: Nếu bạn gặp lỗi hiển thị icon ô vuông, thì bạn kiểm tra trong file all.css (bạn cài đặt) kéo xuống phần cuối cùng sẽ thấy đường dẫn ../webfonts/fa-regular-400.woff2,….đã đúng đường dẫn chưa nhé.

Với font awesome 6 bạn còn có thể tạo icon với hiệu ứng, thay đổi kích thước, thêm chữ trên icon,…tham khảo link bên dưới nhé.

» https://fontawesome.com/docs/web/style/styling