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. :)
Mình thêm icon vào menu thấy chữ(category) ở thanh menu bé xíu đi, muốn tăng cỡ chữ ở menu cho to lên thì chỉnh ở phần nào vậy bạn
Phiên bản hiện tại hình như 4.7 làm không được ad ơi
Vẫn làm được mà bạn. Tuy nhiên phiên bản trên trang chủ của FontAwesome giờ đã là 5.0 rồi nên mã cũng đã bị thay đổi so với phiên bản 4.7.0. Thay vì sử dụng mã
fab,fashayfarnhư trên trang chủ thì bạn cứ dùng mãfacũ là được.dùng code ở link cũ này mới được nhé https://fontawesome.com/v4.7.0/icons/
Đã sửa link trong bài. Cảm ơn bạn đã góp ý. :)
ờ, vì mình làm theo hướng dẫn với link mới nhất của nó không đc, ở link cũ chỉ cần cập nhật code bình thường vào là ok
Bạn có đường dẫn có bản 5.0 không vậy cho mình xin đường dẫn với. Cảm ơn.
Đây bạn: https://use.fontawesome.com/releases/v5.0.12/css/all.css
Cho hỏi cách code chuyển màu đen sang màu khác thanh MENU childtheme Magazine Pro của Genesis Framework giúp e với. Tks
Chèn code này vào Appearance => Customize => Additional CSS:
.nav-primary {background-color: #222;
}
Nhớ thay mã màu hexa cho hợp lý.
Ko a ơi, ý em là chỉnh thanh MENU nền trắng chữ đen có gạch xanh giống hình phía trên bài này a post ak? E Ko biết tuỳ chỉnh như thế nào từ đen sang như thế dc? A giúp e với?
Trong bài viết là theme khác mà bạn. Có ai nói đó là theme Magazine Pro đâu? Website phát hành theme đó (WP Canada) cũng đã bị đóng cửa từ lâu rồi. Bạn muốn tùy biến thì tự tìm hiểu nhé. Cái này nó liên quan đến CSS. Mình không có thời gian để hỗ trợ các vấn đề liên quan đến tùy biến giao diện đâu. Bạn thông cảm.
Làm sao để tải không đồng bộ cái Font awesome này ad nhỉ
Nếu FontAwesome được tích hợp sẵn trong mã nguồn theme thì nó luôn load sau các thành phần khác mà. Chỉ có FontAwesome load từ nguồn bên ngoài (MaxCDN, BootstrapCDN…) thì mới load trước thôi.
Em dùng shortcode của Ad thấy google pagespeed cảnh báo :(
Bạn thấy site của mình có bị không? :P
Làm sao để tắt ping back trong theme vậy ad, em liên hệ skype mà không được trả lời.
https://imgur.com/3d0xlAN
Hỗ trợ dùm em với :(
Ping Back, Track Back là tính năng của WordPress mà. Liên quan gì đến theme? Bạn vào Settings => Discussion => Bỏ tick trong 2 mục là “Attempt to notify any blogs linked to from the article” và “Allow link notifications from other blogs (pingbacks and trackbacks) on new articles” đi là được.
Mình vừa update theme Paradise, bị mất font awesome ở menu. Mã font có thay đổi gì ko Hiếu nhỉ?
Kể từ phiên bản 5.4.0, bên mình đã loại bỏ Font Awesome và không hỗ trợ chèn icon vào menu nữa bạn nhé. Thông tin chi tiết bạn có thể xem tại đây.
À, thế có cách nào thay thế ko Hiếu?
Mà sao dạo này cứ trả lời lần 2 lại hiện mỗi khung email nhỉ
Không nên tích hợp thêm fonts icon vào website nhé, nếu bạn muốn cải thiện tốc độ load web và điểm Core Web Vitals. Đó cũng là lý do bên mình quyết định loại bỏ Font Awesome.
Ok mình hiểu rồi. Cảm ơn Hiếu!
Sau khi loại bỏ Font Awesome thì dung lượng theme giảm từ gần 1MB xuống chỉ còn hơn 300KB, đủ thấy nó nặng như thế nào rồi đấy. :D
Hơi buồn 1 tí, mà thôi đành vậy :P