Hướng dẫn thêm icon vào menu của Genesis Framework và Genesis child theme một cách đơn giản.
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:
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. 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' );
}Hoặc thay thế bằng code sau đây nếu bạn muốn dùng CDN của CloudFlare để tải Font Awesome:
add_action( 'wp_enqueue_scripts', 'load_font_awesome' );
function load_font_awesome() {
wp_enqueue_style( 'font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css', array(), '4.7.0' );
}Các bạn cũng có thể sử dụng plugin Code Snippets để chèn code thay vì chèn trực tiếp vào trong file theme.
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:
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. :)
sao mình làm ko được ban Hiếu nhỉ Home
Update: phiên bản FontAwesome liên tục được nâng cấp và bổ sung thêm icon mới. Để sử dụng một cách hoàn hảo nhất, các bạn truy cập vào trang https://fortawesome.github.io/Font-Awesome/ và kiểm tra xem phiên bản mới nhất là bao nhiêu. Sau đó, thay “4.0.3” trong code bên trên thành mã phiên bản mới nhất, chẳng hạn như “4.4.0”. Chúc các bạn thành công!
Cách này mình dùng cũng ko đc luôn! Chán quá. Mò mấy chiêu Genesis của AD mà ko đc cái nào hoạt động. Heyza!
Bật debug xem nó có bị xung đột với plugin nào khác không? Theme của mình tùy biến từ Magazine Pro ra và cũng sử dụng mấy code đó thôi. :P
Dùng code không được chắc đành dùng Plugin thôi. Mày mò mãi cũng đổi được màu 2 thanh memu. Nhưng nó bị 2 khoảng đen như hình:
http://www.upsieutoc.com/images/2015/11/21/menu.png
Nếu được Ad cho mình xin phần code “Site Navigation” để ngâm cứu thì tốt quá!
Cám ơn AD!
Rất tiếc là không được bạn nhé. Bạn phải tự nghiên cứu thôi. Cũng đơn giản mà. Biết chút CSS là có thể chỉnh sửa được. :P
Thì mình toàn nghiên cứu đó. khó quá mới hỏi thôi. Thế không giúp gì hết được hả AD? Mình muốn full width mà không được. width: 100%; cũng không đc!
Giờ phải chơi dạng này nó mới hiển thị chứ span không hiển thị được rồi.
Ủa. Mình vẫn dùng thẻ span mà. :P
Mình có làm y trang hướng dẫn luôn mà dùng thẻ span không hiển thị chứ :(
ọc html không hiển thị trong comment bạn thay thẻ span trong hướng dẫn thành chữ i
Chả Được AD Ơi :( Làm Đi Làm Lại Vẫn Không Được :(
Bạn sửa 4.0.3 thành 4.3.0 xem có được không nhé. Nếu site sử dụng plugin tạo cache, minify, async js thì thử deactive xem sao. :P
Bạn sử dụng nhé bài viết này bác hiếu chưa cập nhật lại :D
Bạn ấy làm được rồi. Dùng thẻ span vẫn hiển thị bình thường mà. Mình cũng đang dùng đây. :-P
Anh Hiếu cho em hỏi cái :D , là thêm cái đoạn code của bác đưa vào file functions.php vào Genesis hay vào child themes thì đều bị trắng trang . mà mấy code khác của bác kêu thêm vào đó em thêm đều bị vậy hết , bác có thể chỉ em thêm vào khúc nào không ?, em thường thêm vào đoạn cuối của file đó. à mà bác cho em xin luôn cái Paradise child theme qua email nhé , hôm qua em có xin cái megazine pro rồi mà cài vào thấy font chữ và bố cục chưa ưng ý lắm :D
Mình vừa update bài viết. Bạn thử lại xem sao nhé. Bạn chỉ cần chèn vào cuối file functions.php của child theme là được. Còn Paradise không phải là theme miễn phí bạn nhé. Mình không share mà chỉ sử dụng để cài đặt cho khách hàng. Mong bạn thông cảm. :P
Hiếu hd bài tạo menu như của ông đi
Làm như trong bài viết bên trên đó bạn. :P
Có một cách khác nếu các bạn không muốn dùng code đó là
B1. Cài plugin http://wordpress.org/plugins/font-awesome-4-menus/
B2. Giống của bạn Trung Hieu Bui
Cũng là một giải pháp hay. Nhưng nên hạn chết dùng plugin càng ít càng tốt bạn ạ. :)