Trang chủ / Thủ thuật Online / Wordpress / Thêm icon vào menu của Genesis Framework và child theme

Thêm icon vào menu của Genesis Framework và child theme

Thêm icon vào menu của Genesis Framework và child theme4.7 (28 votes)

Thêm icon vào menu của Genesis Framework và Genesis child theme.

theme-icon-vao-menu-cua-genesis-framework-va-child-theme

Bạn đã quá nhàm chán với việc suốt ngày phải nhìn vào một thanh menu toàn chữ là chữ? Chúng quá đơn điệu và không hề bắt mắt một chút nào. Bạn có muốn một thanh menu sống động, trông như hình minh họa bên trên? Vô cùng đơn giản. Ngay sau đây, tôi sẽ hướng dẫn các bạn cách thêm icon vào menu của Genesis Framework hoặc Genesis child themes chỉ với vài bước đơn giản. Hướng dẫn cũng có thể được áp dụng cho các WordPress themes khác.

Tham khảo thêm:

Thêm icon vào tiêu đề widget trong WordPress
Làm thế nào để thêm icon vào menu của WordPress?
Thêm icon vào menu Genesis Framework và child theme

1. Thêm đoạn code dưới đây vào cuối file functions.php của Genesis Framework hoặc child theme mà bạn đang dùng.

Lưu ý: với theme Paradise, chúng tôi đã tích hợp sẵn Font Awesome vào trong theme nên các bạn không cần phải thêm code bên trên nữa.

2. Truy cập vào Appearance => Menus (nơi tạo và chỉnh sửa menu), thêm <span> class dưới đây vào mục Navigation Label, trước các nhãn.

Các bạn cũng có thể sử dụng <i> class nếu <span> class không có tác dụng.

Giữa 2 dấu (“) là nơi bạn thêm mã của Font Awesome vào. Danh sách bảng mã, vui lòng xem tại đây. Ví dụ tôi muốn thêm biểu tượng nút home, tôi sẽ điền code là “fa fa-home”. (Xem hình minh họa bên dưới).

chèn-code-font-awesome-vao-menu

Làm tương tự với các nhãn khác trong menu. Sau khi hoàn tất, lưu lại và xem kết quả. Đơn giản vậy thôi. Chúc các bạn thành công!

Bạn có phương pháp đơn giản và hiệu quả hơn để thêm icon vào menu Genesis Framework và child theme? Hãy chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận bên dưới.

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. 🙂

Chia sẻNhấn vào chia sẻ trên Facebook (Opens in new window)Bấm để chia sẻ trên Google+ (Opens in new window)Bấm để chia sẻ trên Twitter (Opens in new window)

Bài viết liên quan

About hoangnguyen

Có thể bạn cũng thích

Khắc phục lỗi cache của Google Analytics một cách đơn giản

Khắc phục lỗi cache của Google Analytics một cách đơn giản4.4 (13 votes) Khắc phục …