Cách thêm font awesome vào wordpress nhanh, không lỗi (2026)

Do WordPress không hỗ trợ sẵn thư viện icon để trang trí website nên nhiều người thường tải các tệp hình ảnh lên để làm biểu tượng. Điều này vô tình làm tăng dung lượng trang, làm chậm tốc độ tải và hình ảnh bị mờ, vỡ khi phóng to màn hình. Để khắc phục, bạn có thể sử dụng Font Awesome – thư viện biểu tượng vector lớn nhất thế giới. Bài viết dưới đây sẽ hướng dẫn bạn chi tiết cách chèn Font Awesome vào WordPress giúp website của bạn trở nên sinh động, siêu nhẹ và chuẩn SEO mà không bị lỗi.

Tại sao nên sử dụng Font Awesome cho website WordPress?

Font Awesome là bộ công cụ biểu tượng (icon) và phông chữ dạng vector nổi tiếng dùng cho thiết kế và lập trình web. Thay vì phải thiết kế từng icon bằng hình ảnh, việc tích hợp thư viện Font Awesome mang lại những lợi ích vượt trội về cả hiệu năng lẫn thẩm mỹ:

• Tối ưu tốc độ tải trang: Font Awesome sử dụng định dạng vector (được tải dưới dạng font chữ). Dung lượng của chúng cực kỳ nhỏ gọn, giúp giảm thiểu đáng kể số lượng request máy chủ, từ đó không làm chậm tốc độ load web.
• Độ nét hoàn hảo trên mọi thiết bị: Dù người dùng truy cập bằng điện thoại (Mobile) hay máy tính (Desktop), dù phóng to hay thu nhỏ (scale), các icon vẫn giữ được độ sắc nét tuyệt đối, không gặp tình trạng vỡ hạt.
• Thư viện đồ sộ, đa dạng: Với hàng ngàn icon miễn phí bao phủ mọi lĩnh vực (từ thương mại điện tử, y tế, giáo dục đến các icon mạng xã hội), bạn có thể tìm thấy biểu tượng phù hợp cho mọi ngữ cảnh nội dung.
• Tùy biến cực dễ dàng: Bạn có thể đổi màu sắc, thay đổi kích thước, tạo hiệu ứng đổ bóng hay xoay icon một cách linh hoạt chỉ bằng vài dòng lệnh CSS cơ bản.

Cách 1: Thêm Font Awesome bằng Plugin

Nếu bạn không muốn can thiệp vào mã nguồn, sử dụng plugin chính chủ từ Font Awesome là giải pháp an toàn và nhanh gọn nhất. Phương pháp này đáp ứng tốt nhu cầu của 80% người dùng WordPress hiện nay.

Bước 1: Cài đặt Plugin Font Awesome chính thức

• Truy cập vào trang quản trị WordPress (Dashboard). Điều hướng tới Plugins > Add New (Cài mới). Tại ô tìm kiếm, nhập từ khóa “Font Awesome”.

• Hãy tìm đúng plugin được phát triển bởi Font Awesome, nhấn Install Now (Cài đặt ngay) và sau đó Activate (Kích hoạt) để bắt đầu sử dụng.

Bước 2: Cấu hình phương thức hiển thị

Sau khi kích hoạt, bạn vào Settings > Font Awesome để cấu hình. Tại đây, bạn sẽ có hai tùy chọn hiển thị chính:

• Web Font: Đây là công nghệ phổ biến, độ ổn định cao và tương thích ngược tốt với các hệ thống cũ. Rất dễ sử dụng cho hầu hết mọi theme.
• SVG: Tùy chọn này giúp render icon nhanh hơn, sắc nét hơn và hỗ trợ các tính năng nâng cao. Tuy nhiên, nó đôi khi có thể xung đột nhẹ với một số trình dựng trang (Page Builder) đời cũ.

Lưu ý: Hệ thống sẽ cho phép bạn chọn sử dụng phiên bản Free (Miễn phí) hoặc Pro (Trả phí). Nếu bạn đang sử dụng tài khoản Font Awesome Pro, bạn có thể cuộn xuống phần API Token để kết nối và mở khóa toàn bộ thư viện icon cao cấp.

Bước 3: Chèn icon vào bài viết/trang

Với plugin, việc chèn icon trở nên cực kỳ đơn giản:

• Sử dụng Gutenberg Block: Trong trình soạn thảo bài viết, bạn chỉ cần gõ /icon hoặc tìm block Font Awesome, sau đó tìm kiếm tên biểu tượng trực tiếp trên giao diện.
• Sử dụng Shortcode: Bạn có thể dán đoạn mã ngắn sau vào bất kỳ đâu hỗ trợ shortcode (như Text widget, bài viết): [icon name=”coffee” prefix=”fas”]. Trong đó, coffee là tên icon và fas là tiền tố biểu thị kiểu dáng (Solid).

Cách 2: Chèn Font Awesome vào WordPress thủ công bằng link CDN

Nếu bạn là người mới làm quen với mã nguồn mở này và không muốn đụng chạm đến code, sử dụng plugin font awesome wordpress là sự lựa chọn an toàn và nhanh chóng nhất. Việc nhúng trực tiếp qua link CDN giúp tận dụng máy chủ toàn cầu của Font Awesome, tăng tốc độ phân phối icon đến người dùng.

Bước 1: Lấy đoạn mã CDN

• Truy cập trang chủ Font Awesome và tạo một tài khoản miễn phí.
• Sau khi đăng nhập, hệ thống sẽ cấp cho bạn một dự án gọi là “Kit”. Nhấn vào Kit này, bạn sẽ nhận được một đoạn mã Script có định dạng như sau: <script src=”[https://kit.fontawesome.com/xxxxxx.js](https://kit.fontawesome.com/xxxxxx.js)” crossorigin=”anonymous”></script>.

Bước 2: Chèn mã vào Header của WordPress

Bạn cần chèn đoạn script vừa copy vào giữa cặp thẻ <head> … </head> của website. Có 2 cách thực hiện:

• Cách 1 (Khuyên dùng): Dùng plugin Insert Headers and Footers: Đây là cách an toàn nhất. Cài đặt plugin WPCode – Insert Headers and Footers, sau đó dán đoạn mã script vào mục Header và lưu lại.
• Cách 2: Sửa trực tiếp file header.php: Vào Appearance (Giao diện) > Theme File Editor. Mở file header.php của giao diện đang dùng, tìm thẻ </head> và dán đoạn mã script ngay phía trên nó, sau đó bấm Update File.

Cách 3: Thêm mã trực tiếp vào file functions.php

Nếu bạn là một lập trình viên (Coder) và đang phát triển theme riêng, việc gọi thư viện (enqueue script) thông qua file functions.php là tiêu chuẩn chuyên nghiệp nhất. Cách này giúp kiểm soát luồng tải của mã nguồn chuẩn xác.

Cách thực hiện:

Lưu ý: Bạn bắt buộc phải thao tác trên Child Theme (Giao diện con). Nếu bạn chèn code trực tiếp vào Theme gốc, toàn bộ đoạn code này sẽ bị xóa sạch khi bạn tiến hành cập nhật phiên bản mới của Theme.

• Bước 1: Sử dụng đoạn Code Snippet chuẩn

Mở file functions.php của Child Theme và dán đoạn mã sau xuống cuối cùng. Chú ý thay thế đường dẫn thư viện (link CSS/JS) bằng link mới nhất hoặc link CDN của riêng bạn.

function enqueue_load_fa() {

    wp_enqueue_style( ‘load-fa’, ‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css’ );

}

add_action( ‘wp_enqueue_scripts’, ‘enqueue_load_fa’ );

Trong ví dụ này, chúng tôi đang sử dụng hàm wp_enqueue_style để gọi tệp CSS của Font Awesome phiên bản 6.0.0 thông qua cdnjs

• Bước 2: Nhấn Update File (Cập nhật tệp), xóa cache web và ra ngoài trang chủ để kiểm tra thành quả.

Hướng dẫn chèn icon Font Awesome vào bài viết và Menu

Sau khi đã tích hợp thành công Font Awesome bằng 1 trong 3 cách trên, đây là lúc bạn đưa các icon ra ngoài giao diện cho người dùng nhìn thấy. Dưới đây là hướng dẫn cách chèn icon Font Awesome vào bài viết và Menu:

Chèn icon vào nội dung bài viết

Bạn có thể thác tác trên trình soạn thảo khối Gutenberg mới hay Classic Editor cũ đều được:

Cách thực hiện:

• Bước 1: Tại vị trí muốn chèn, hãy thêm một block (khối) có tên là Custom HTML (HTML Tùy chỉnh).
• Bước 2: Dán đoạn mã thẻ <i> mà bạn đã copy từ trang chủ Font Awesome vào đó.
• (Ví dụ: <i class=”fas fa-home”></i> sẽ hiển thị một ngôi nhà).
• Bước 3: Nhấn Preview (Xem trước) để thấy icon hiển thị ngay trong bài viết.

Thêm icon vào Menu điều hướng (Navigation Menu)

Để thanh điều hướng (Menu) trông chuyên nghiệp và trực quan hơn, bạn có thể thêm icon ngay trước chữ:

Cách thực hiện:

• Bước 1: Vào Appearance > Menus.
• Bước 2: Nhìn lên góc phải trên cùng màn hình, bấm vào Screen Options (Tùy chọn hiển thị) và tick chọn hộp CSS Classes.
• Bước 3: Mở rộng một mục menu bất kỳ, bạn sẽ thấy xuất hiện một trường mới là CSS Classes (optional).
• Bước 4: Nhập class của icon vào ô này (ví dụ: fas fa-home cho trang chủ, fas fa-phone cho liên hệ) và lưu lại.

Chèn icon khi sử dụng Elementor / Page Builder

Hầu hết các Page Builder như Elementor đều tích hợp sẵn thư viện Font Awesome. Tuy nhiên, đôi khi phiên bản mặc định của Elementor bị cũ. Để đồng bộ và sử dụng các icon mới nhất, bạn thực hiện như sau:

• Truy cập Elementor > Settings > Advanced
• Kéo xuống tìm mục Load Font Awesome 4 Support và chọn Yes để tránh lỗi hiển thị nếu bạn đang kết hợp cả phiên bản cũ và mới. Hoặc sử dụng tùy chọn custom icon set trong Elementor Pro để tải lên bộ SVG của riêng bạn.

Nên dùng Plugin hay chèn Code thủ công?

Không có phương pháp nào là hoàn hảo tuyệt đối. Tùy vào kỹ năng và mục tiêu tối ưu, bạn hãy chọn cho mình cách làm phù hợp nhất theo bảng so sánh dưới đây:

Khắc phục lỗi Font Awesome thường gặp trên WordPress

Trong quá trình sử dụng, bạn có thể gặp phải một vài trục trặc hiển thị. Dưới đây là cách xử lý nhanh, hiệu quả các lỗi phổ biến nhất.

Lỗi Icon hiển thị thành hình vuông trống (Empty Square/Box)

Nguyên nhân 1: Sai cú pháp tiền tố (Prefix). Từ bản Font Awesome 5 trở đi, các icon được chia làm nhiều họ khác nhau: fas (Solid – nét đậm), far (Regular – nét thường), fab (Brands – logo thương hiệu). Nếu bạn chèn mã HTML sai tiền tố, icon sẽ không hiển thị.

• Cách sửa nhanh bằng CSS: Đôi khi icon Solid không hiện do thiếu định dạng độ dày. Bạn chỉ cần thêm CSS sau cho class của icon: font-weight: 900;

Nguyên nhân 2: Xung đột phiên bản. Theme của bạn đang tự động load Font Awesome bản 5.x nhưng bạn lại copy đoạn mã chèn icon của bản 6.x.

• Cách xử lý: Bật tính năng Inspect (F12) trên trình duyệt, kiểm tra tab Network để xem website đang load file CSS của bản nào. Sau đó, dùng hàm wp_dequeue_style trong file functions.php để chặn file CSS phiên bản cũ của Theme, chỉ giữ lại bản CDN mới nhất mà bạn đã chèn.

Lỗi tải chậm do CORS (Cross-Origin Resource Sharing)

Nguyên nhân: Khi load font từ CDN, một số máy chủ hosting cấu hình bảo mật nghiêm ngặt sẽ chặn việc tải tài nguyên từ một domain khác, gây ra lỗi CORS khiến icon không hiển thị trên trình duyệt (thường gặp ở Firefox).

• Cách xử lý: Bạn cần cấp quyền cho phép load font. Mở file .htaccess ở thư mục gốc của website và dán đoạn mã này vào:

<IfModule mod_headers.c>

  <FilesMatch “\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$”>

    Header set Access-Control-Allow-Origin “*”

  </FilesMatch>

</IfModule>

Chèn icon vào website không chỉ giúp giao diện trở nên chuyên nghiệp, đẹp mắt hơn mà còn nâng cao trải nghiệm điều hướng của người dùng. Hy vọng hướng dẫn cách thêm font awesome vào wordpress chi tiết phía trên sẽ hữu ích với bạn.

Founder Lê Hưng

Tôi là Lê Hưng, là Founder và CEO của SEOVIET, với hơn 14 năm kinh nghiệm trong lĩnh vực SEO. Dưới sự lãnh đạo của tôi, SEOVIET đã xây dựng uy tín vững chắc và trở thành đối tác tin cậy của nhiều doanh nghiệp. Tôi còn tích cực chia sẻ kiến thức và tổ chức các sự kiện quan trọng, đóng góp vào sự phát triển của cộng đồng SEO tại Việt Nam.