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:
Thêm icon vào menu có làm web load chậm hơn?
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.
Thêm icon vào menu Genesis 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' );
}
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. :)
Ban ơi sao minh cài cái icon giờ site mình ngừng hoạt động là sao bạn nhỉ
Truy cập vào Files Manager của cPanel hoặc FTP, mở tập tin functions.php của child theme ra và xóa đoạn code vừa thêm đi. Có vẻ bạn chèn không đúng cách rồi. :P
mình xóa rồi mà vẫn ko đc
Xóa sạch cái đoạn code vừa thêm chưa? Nếu xóa hết rồi mà vẫn không vào được thì vô lý. :P
mình vào Files Manager nhưng ko thấy tập tin đó
Gửi thông tin đăng nhập cPanel hoặc FTP đây mình check cho nào. :D
Mình đưa tài khoạn lên đây có sao ko bạn. Nhờ bạn đừng đăng lên nha
Mình cài icon có hình cái cờ lê( cài đặt) xong cái nó hiện luôn cả site mình sợ hư nên mình vào xóa đoạn code đó. Nhưng nhìn ko rõ nên chỉ xóa đc 1 đoạn còn 1 đoạn trong đó. Nên mới bị thế. Bạn giúp mình đc ko?
Xong nhé. Đơn giản thôi mà. :)
Mình gửi tài khoản của mình trong phần liên hệ cho bạn rồi. Nhờ bạn giúp đỡ
Cảm ơn bạn nhiều lắm
Bạn kiểm tra lại site chưa? :D
Site mình vào giờ toàn hình cái cờ lê giờ fải làm sao bạn nhỉ?
Bạn chèn nó vào đâu thì vào đó xóa code đi là được mà. :P
Chào anh Hiếu,
Mình muốn mỗi lần mình tạo một trang mới thì trang đó sẽ tự động đưa lên menu theo thư mục mình định sẵn không biết phải làm sao. Giống trang web này: http://miadesignstudio.com/english#about . Phần Residential mỗi lần có trang mới được tạo nó sẽ đưa lên menu con của phần Residential
WordPress chỉ có chức năng tự động thêm trang mới vào menu chứ không thể tự động thêm vào menu theo thư mục được bạn ạ. Còn dùng functions hoặc plugin nào để tùy biến như vậy thì mình chịu. :P
hihi. cảm ơn anh Hiếu đã trả lời.
Dear Hiếu,
Cho t hỏi một chút. T có cài đặt font awesome theo cách thủ công.
T up các thư mục của file awesome lên theme đang dùng và dùng hàm này trong function.php để gọi ra:
function add_font_awesome() {wp_register_style('font-awesome-style', get_template_directory_uri() . '/css/font-awesome.min.css');
wp_enqueue_style('font-awesome-style');
}
add_action('wp_enqueue_scripts', 'add_font_awesome');
Và đã thành công.
Tuy nhiên ngày hôm nay t check google page speed thì có phát hiện ra một đường dẫn lạ trong blog:
http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css
T đã kiểm tra trong toàn bộ css và function của theme thì đều không có.
Vậy nhờ c kiểm tra giúp t link đó được gọi ra trong file nào trên blog được không? T cảm ơn.
Blog của t: http://tiin24.net
Để tích hợp Font Awesome vào trong theme, bạn dùng code này sẽ chuẩn hơn:
//* Add Font Awesomeadd_action( 'wp_enqueue_scripts', 'load_font_awesome' );
function load_font_awesome() {
wp_enqueue_style( 'font-awesome', get_bloginfo( 'stylesheet_directory' ) . '/css/font-awesome.min.css', array(), '4.5.0' );
}
P/s: Bạn nhớ thay tên phiên bản cho phù hợp nhé. :P
Dear Hiếu,
T cảm ơn nhé.
Để t thử lại xem sao. Có gì không hiểu t lại làm phiền c.
Thanks.
Hiếu cho mình hỏi, mình thêm đoạn code này vao file function của paradise theme, nhưng không được, Hiếu check dùm nhé. Thanks
//* Add Font Awesomeadd_action('wp_enqueue_scripts','load_font_awesome');
function load_font_awesome() {
wp_enqueue_style( 'font-awesome', get_bloginfo('stylesheet_directory').'/css/font-awesome.min.css', array(), '4.7.0' );
}
Bạn đã download đủ các file cần thiết của bộ font và upload nó vào source của theme chưa? :P
Mình thấy trong source theme paradise có thư mục css rồi.
Ôi trời. Nếu là theme Paradise thì cần gì phải tích hợp FontAwesome nữa bạn. Bên mình đã tích hợp sẵn rồi mà. Bạn chỉ việc chèn icon vào là được. Nếu span class mà icon không hiện thì đổi thành i class xem sao. :P
Mọi người dùng plugin này, rất chuyên nghiệp
https://mythemeshop.com/plugins/wp-mega-menu/
bạn nào cần link down inbox mình
Mình muốn thêm icon vào chuyên mục ở widget giống mục Series bạn nên xem phải làm sao vậy bạn?
Nó cũng là một cái menu thôi mà bạn. :)
Theme paradise tích hợp sẵn awesome nhưng mình thấy hơi nặng giờ muốn remove ko dùng nữa thì thế nào Hiếu ơi hoặc giải pháp xóa font ko dùng nhưng vào thấy như ma trận ko biết xóa thế nào.
FontAwesome không những để thêm icon vào menu mà nó còn liên quan đến icon của nhiều vị trí khác nên không xóa được đâu anh. Không biết cách làm là lỗi tùm lum ngay.