Hướng Dẫn Thêm Icon Vào Menu WordPress Mới Nhất 2026

Bạn đang muốn thêm icon vào menu wordpress? Nhưng đang phân vân không biết nên sử dụng plugin hay code css để thực hiện. Hãy cùng Halo Media tìm hiểu chi tiết qua bài viết dưới đây nhé!

Mục đích của việc thêm icon vào menu bằng plugin

Thông thường, các menu điều hướng trong WordPress là các liên kết văn bản thuần túy. Các liên kết này sẽ hoạt động trên hầu hết các trang web, nhưng bạn có thể làm cho menu điều hướng trông tương tác hơn bằng cách thêm nhiều biểu tượng hơn.

Các biểu tượng trực quan và làm cho menu dễ nhìn hơn. Ví dụ: một biểu tượng đẹp bên cạnh trang liên hệ sẽ làm cho nó nổi bật và dễ nhận biết hơn.

Thật dễ dàng, thêm các biểu tượng hình ảnh với menu điều hướng trong WordPress chỉ bằng 2 cách sau đây:

Thêm icon vào menu wordpress bằng 2 cách

Cách 1: Thêm icon vào menu wordpress bằng plugin

Phương pháp dùng plugin này dễ hơn so với code css, phù hợp với người mới bắt đầu thiết kế website bằng WordPress

Để dùng được plugin thì bước đầu tiên là cài plugin Menu Image

thêm icon vào menu wordpress
Tìm và cài đặt plugin Menu Image trong phần plugin của WordPress

Sau khi hoàn thành cài đặt plugin Menu Image, bạn tiến hành vào Appearance -> Menu. Chọn 1 trang bất kì trong menu để thêm icon vào menu wordpress cho trang đó

thêm icon vào menu wordpress
Chọn mục menu và chọn trang muốn thêm icon vào trang

Đây là giao diện thêm icon vào menu của plugin, ở mục này bạn có 2 lựa chọn là tải hình ảnh từ mục media của website lên và sử dụng icon có sẵn của plugin.

thêm icon vào menu wordpress
Chọn cách tải hình ảnh từ media của website lên

Mục này bạn sẽ chọn các icon có sẵn:

thêm icon vào menu wordpress
Chọn các icon có sẵn của plugin

Cách 2: Thêm icon vào menu wordpress bằng CSS

Phương pháp này phù hợp với những người sử dụng tốt css

Trước tiên, bạn phải upload icon muốn thêm vào menu vào mục media của WordPress, Mỗi hình ảnh trong mục menu sẽ có 1 URL, mình sẽ sao chép URL của icon muốn chèn.

Bước tiếp theo, bạn chọn Appearance -> Menu, Click chọn mục Screen Options ở góc bên phải của màn hình. Tìm vào tích chọn vào mục “Css Classes

thêm icon vào menu wordpress
Tích chọn CSS Classes

Sau đó bạn kéo xuống dưới các mục và mở cài đặt mở rộng. Bạn sẽ thấy mục có tên là “CSS Classes“. Mục này để điền tên CSS Class cho menu.

thêm icon vào menu wordpress
Điền CSS Class vào các mục trong Menu

Mình sẽ điền tên CSS Class vào vào dùng code CSS để chỉnh sửa lại.

thêm icon vào menu wordpress
Đặt tên CSS Class

Bây giờ bạn cần phải chỉnh code css cho icon. Bạn thêm đoạn code sau vào theme của bạn:

thêm icon vào menu wordpress
Copy đoạn code vào theme

.blogicon là tên class mà lúc này mình đặt cho mục trong menu.

Câu hỏi thường gặp

Có 2 cách chính để thêm icon vào menu WordPress: dùng plugin và dùng code CSS. Cách dùng plugin (như Menu Image) dễ hơn, phù hợp người mới bắt đầu thiết kế website. Cách dùng CSS phức tạp hơn, phù hợp với người sử dụng tốt CSS và muốn tùy biến sâu hơn cho từng mục menu.
Plugin Menu Image là lựa chọn dễ dùng nhất để thêm icon vào menu WordPress. Sau khi cài, bạn vào Appearance rồi Menu, chọn trang muốn gắn icon. Plugin cho 2 lựa chọn: tải hình ảnh từ mục Media của website lên hoặc dùng bộ icon có sẵn ngay trong plugin, rất tiện cho người mới.
Để thêm icon bằng CSS, trước tiên bạn upload icon vào mục Media và sao chép URL của icon đó. Tiếp theo vào Appearance rồi Menu, mở Screen Options và tích chọn ‘CSS Classes’, sau đó điền tên class cho mục menu. Cuối cùng bạn chèn đoạn code CSS gọi class đó vào theme để hiển thị icon.
Thêm icon giúp menu điều hướng trở nên trực quan, dễ nhìn và tương tác hơn so với liên kết văn bản thuần túy. Các biểu tượng làm từng mục nổi bật và dễ nhận biết, ví dụ icon đẹp cạnh trang liên hệ giúp người dùng tìm thấy nhanh hơn, từ đó cải thiện trải nghiệm trên website.

Tổng kết

Qua bài viết hướng dẫn thêm icon vào menu WordPress bằng cách dùng plugin và cách thêm CSS Classes vào các mục menu. Chúng ta đã biết cách thêm icon vào menu giúp các menu tương tác, dễ nhìn hơn cho trang web của bạn. Hy vọng bài viết này sẽ giúp các bạn cài đặt thành công.

5/5 - (2 bình chọn)

Bài viết liên quan

Thông báo Bộ Công Thương: bắt buộc với web nào? Hướng dẫn 2026

Nếu bạn đang vận hành một website bán hàng tại Việt Nam, đặc biệt là

Phân biệt Thông báo vs Đăng ký Bộ Công Thương

Nếu bạn đang vận hành website bán hàng tại Việt Nam, đặc biệt là website

Lỗi 500, 502, 503, 504 WordPress: Phân biệt và cách xử lý chi tiết

Khi vận hành website WordPress trong thời gian dài, việc gặp các lỗi thuộc nhóm

SSL hết hạn: 5 dấu hiệu + cách gia hạn miễn phí Let Encrypt

SSL là một trong những thành phần bảo mật quan trọng nhất của website hiện

Heatmap cho Landing Page: Hướng dẫn sử dụng Hotjar và Microsoft Clarity

Nếu bạn đang chạy landing page mà chỉ nhìn vào số liệu kiểu traffic, time

Ẩn /wp-admin và đổi đường dẫn login WordPress an toàn

WordPress là nền tảng website phổ biến nhất thế giới, chiếm hơn 40% tổng số

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *