Làm thế nào để thêm icon vào menu của WordPress?

Click Để Xem Nhanh

• 1. Thêm icon vào menu có làm web load chậm hơn?
• 2. Thêm icon vào menu của WordPress với plugin Menu Icons

Hướng dẫn thêm icon vào menu của WordPress một cách đơn giản mà không cần biết code.

Bạn đang muốn thêm icon vào menu của WordPress để khiến chúng trở nên sống động và chuyên nghiệp hơn? Thông thường, bạn sẽ phải chỉnh sửa CSS, tích hợp code snippet trong trường hợp theme không hỗ trợ sẵn, nhưng nhờ có một plugin hoàn toàn mới, bạn không cần thiết phải làm điều này nữa. Menu Icons là một plugin miễn phí, cho phép bạn dễ dàng thêm các biểu tượng vào menu mà không cần phải động chạm vào bất kỳ đoạn code nào.

Tham khảo thêm:

• Thêm icon vào tiêu đề widget của WordPress một cách đơn giản
• Thêm icon vào menu của Genesis Framework và child theme

Thêm icon vào menu có làm web load chậm hơn?

Câu trả lời chắc chắn là có nhé. Tùy thuộc vào loại Font Icon bạn chọn mà mức độ ảnh hưởng sẽ khác nhau. Do đó, bạn cần cân nhắc kỹ xem việc chèn icon vào web có thực sự cần thiết hay không? Nếu bạn ưu tiên tốc độ load web thì tốt nhất hãy tránh xa Google Fonts và các loại Font Icon, bởi vì chúng là một trong những “kẻ thù” hàng đầu.

Thêm icon vào menu của WordPress với plugin Menu Icons

1. Đầu tiên, các bạn cần cài đặt và kích hoạt plugin Menu Icons (download) từ thư viện của WordPress.org.

2. Tiêp theo, truy cập vào Appearance => Menus. Tại đây, bạn sẽ thấy một hộp meta mới ở phía bên tay trái có tên là Menu Icons Settings. Bạn có thể chọn những bộ icons có sẵn (Dashicons, Elusive, Font Awesome, Foundation, Genericons) hoặc sử dụng file Image, SVG trong tab Global.

Để tránh phải load quá nhiều loại fonts gây ảnh hưởng xấu đến tốc độ load web, các bạn chỉ nên chọn những loại fonts phù hợp nhất. Click vào nút Save Settings để lưu lại.

3. Chuyển qua tab Current Menu. Tại đây, các bạn có thể thiết lập cách mà icon được hiển thị.

Trong đó:

• Hide Label: ẩn hoặc hiện nhãn menu.
• Position: vị trí hiển thị icon (trước hoặc sau nhãn menu).
• Vertical Align: căn lề cho icon. Cái này các bạn sẽ nhìn thấy rõ nhất trong phần Preview khi chọn icon.
• Font Size: kích thước icon.
• SVG Width: độ rộng của SVG.
• Image Size: kích thước của Image.

Click vào nút Save Settings để lưu lại các thiết lập.

4. Trong giao diện chỉnh sửa menu ở bên phải, click vào nút Select (mục Icon) tương ứng với nhãn menu bạn muốn thêm biểu tượng:

Một cửa sổ sẽ được hiển thị với các icon để cho bạn lựa chọn:

4. Khi một biểu tượng được chọn, phía bên phải sẽ xuất hiện một số tùy chọn cho phép bạn thay đổi cách mà nó hiển thị. Các thiết lập tổng quan ở bước 3 được sử dụng theo mặc định.

Một trong những tính năng mà tôi yêu thích là khả năng sử dụng icons từ nhiều gói fonts khác nhau. Nếu một gói không có icon mà bạn đang tìm kiếm, bạn có thể lựa chọn icon từ một gói khác. Sẽ mất chưa đến 5 phút để bạn tìm thấy các biểu tượng phù hợp với menu của mình.

Sau khi hoàn tất, hãy click vào nút Save Changes để lưu menu lại và kiểm tra kết quả:

Thật đơn giản phải không nào? Hy vọng plugin Menu Icons sẽ giúp các bạn nhanh chóng có được một thanh menu đẹp hơn, bắt mắt hơn cho trang web WordPress của mình.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)