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

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

theme-icon-vao-menu-cua-genesis-framework-va-child-themetheme-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.

.gist table { margin-bottom: 0; }
Lưu ý: với theme Paradise, chúng tôi đã tích hợp sẵn Font Awesome v4.7.0 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:

.gist table { margin-bottom: 0; }

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

.gist table { margin-bottom: 0; }

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-menuchèn-code-font-awesome-vao-menu

Lưu ý: kể từ phiên bản 5.0, Font Awesome đã sử dụng tiền tố khác (fas, far và fal thay cho fa), tuy nhiên trong bài hướng dẫn này chúng ta sử dụng Font Awesome v4.7.0 nên cả bạn phải sửa lại là fa thì icon mới hiển thị.

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. :)

Thêm icon vào menu của Genesis Framework và child theme
4.7 (34 votes)
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
Nguồn: wpcanban.com