[Thủ thuật WordPress] Thêm icon vào menu của Genesis Framework , child theme , Các menu ngang

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.

 

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.

add_action( ‘wp_enqueue_scripts’, ‘load_font_awesome’ );
function load_font_awesome() {
wp_enqueue_style( ‘font-awesome’, ‘//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’, array(), ‘4.7.0’ );
}
view rawfunctions.php hosted with ❤ by GitHub
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.

<span class=”fa fa-home”></span>

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

<i class=”fa fa-home” aria-hidden=”true”></i>

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

Facebook Comments Plugin Powered byVivacity Infotech Pvt. Ltd.

[Thủ thuật WordPress] Thêm icon vào menu của Genesis Framework , child theme , Các menu ngang
5/5 (100%) 1 votes