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
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.
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. :)
Anh ơi cho em hỏi là em đã đến bước 4. Nhưng khi click icon: select nó lại không hiện ra bảng chọn icon mà hiện 1 bảng trắng trơn. Trợ giúp em với em cảm ơn
Trên trình duyệt Chrome bạn bấm phím F12 => chọn tab Console rồi reload lại web xem nó có báo lỗi gì không?
Uncaught TypeError: Cannot read property ‘get’ of undefined
at i.setMenuTabPanelAriaAttributes (media-views.min.js?ver=5.3.2:1)
at p (backbone.min.js?ver=1.4.0:1)
at f (backbone.min.js?ver=1.4.0:1)
at l (backbone.min.js?ver=1.4.0:1)
at h.Collection.n.trigger (backbone.min.js?ver=1.4.0:1)
at i. [as trigger] (media-views.min.js?ver=5.3.2:1)
at i.propagate (media-views.min.js?ver=5.3.2:1)
at i.open (media-views.min.js?ver=5.3.2:1)
at i. [as open] (media-views.min.js?ver=5.3.2:1)
at Object.pickIcon (admin.min.js?ver=0.10.2:1)
Xung đột với theme/ plugin khác hoặc host không hỗ trợ rồi. :)
Chào admin! Mình đang dùng child theme của genesis farmwork và đang gặp lỗi về thanh beadcrumbs.
Vấn đề mình gặp phải có thể miêu tả như thế này.
Thay vì hiển thị đầy đủ như phía dưới của WPCANBAN
Trang chủ » WordPress » Thủ thuật WordPress » Làm thế nào để thêm icon vào menu của WordPress?
THÌ trang web của mình chỉ hiển thị như này
Trang chủ » Làm thế nào để thêm icon vào menu của WordPress?
Tức là mất đi category trong thanh beadcrumbs.
Mấy ngày nay sửa không được , mong các cao nhân giúp
Bạn có dùng Yoast SEO không? Nếu có thì vào SEO => Search Appearance => Breadcrumbs => Taxonomy to show in breadcrumbs for content types => Post (post) chọn Category => Save Changes thử xem nhé.
Plugin này có nhẹ không? Mình có thử chèn icon font answer thấy cũng ok. Hiện plugin này được anh em sử dụng phổ biến hay không?
đã làm và thành công, cảm ơn b nha
Chào bạn, sao khi mình cài và sử dụng thì có cái icon nằm trước chữ, có cái icon nằm sau chữ. Có thể nào chỉ mình cách sắp xếp lại ko ạ?
Ở bước 4 bạn có thấy mục Position trong hình minh họa không? Đó là nơi bạn có thể lựa chọn vị trí xuất hiện của icon (trước hoặc sau chữ). :P
Vâng. Mục Position mình đã chọn thử After và Before. Tuy nhiên vẫn không thay đổi được ạ. Vẫn giữ nguyên như cũ
Ok Mình đã khắc phục được rồi. Thanks bạn nhiều
mình đã làm đc, cảm ơn bạn nhiều nhé :)
sao mình k thấy 4 gói icon còn lại bạn nhỉ?
Sao mình dùng plugin không được, mh chạy trên localhost và sử dụng theme DIVI có ảnh hưởng gì không.
Cho mh hỏi là phía trên có để chèn code vào file function sao không thấy đoạn code đó vậy ad. mong mn giúp đỡ. Thank.
Chỗ nào nói chèn code vào file functions.php vậy bạn? Mình chưa test thử plugin trên localhost nên không rõ bạn nhé. :P
thank Ad…
lúc đầu đọc thấy có chỗ chèn code vào file function nhưng khi load lại thì không thấy nữa. hỳ.
còn web không nhận plugin thì để e xem lại. hi
Mình muốn mua cái theme ebookvn đang dùng, giá nhiêu vậy Hiếu
Mình đã báo giá cho bạn. Vui lòng check email để xem thông tin chi tiết nhé. Cảm ơn bạn. :)
Bài viết hay, thêm đc nhiều icon như botstrap nhỉ :D
Plugin này sở hữu đến 5 bộ icons khác nhau cơ mà. Tha hồ lựa chọn. :D