Bạn đang sử dụng genesis làm theme cho website blog của mình, bạn đang muốn thay đổi giao diện cho đẹp hơn, với genesis bạn có thể tùy biến bất cứ thứ gì, và hôm nay tôi muốn chia sẻ với bạn một thủ thuật nhỏ giúp bạn có thể chèn các biểu tượng icon vào thanh menu của mình giúp cho nó nhìn bắt mắt hơn.
Với các biểu tượng này trang web của bạn sẽ trở lên sinh động hơn, tuy nhiên để thực hiện việc này bạn cần phải tự tay vọc code, cũng như tự tay chỉnh sửa nó, và tắt nhiên là theo bài hướng dẫn ở phía dưới đây và nó cực kỳ chi tiết để thực hiện, bạn chỉ cần làm theo hướng dẫn.
- Kích hoạt biểu tượng dashicons trong genesis
- Chèn các biểu tượng đẹp mắt vào thanh head-nav
- Chỉnh sửa các đoạn mã CSS mẫu
- Bạn có thể tùy chỉnh các icon khác nhau tùy theo mục đích sử dụng
Hướng dẫn chèn biều tượng vào genesis
Bài viết này được thực hiện trên theme genesis sample nên nó hoạt động trên bất kỳ chủ đề nào.
1. Kích hoạt dashicons
Để kích hoạt bạn chỉ cần copy toàn bộ code bên dưới dán vào functions.php
2. Tùy chỉnh CSS
Sao chép toàn bộ mã CSS bên dưới dán vào style.css
Lưu ý bạn thay đổi các lớp CSS cho phù hợp với chủ đề của bạn bằng cách lấy các mã icon dashicons tại đây.
Truy cập Dashboard > Appearance > Menus bạn cần kích hoạt tính năng css class trong “Screen Options” để hiển thị các các lớp css cho từng menu.
Tích vào css class sau khi đã kích hoạt tính năng CSS Classes giờ bạn trở lại menu của mình và thêm thuộc tính CSS cho nó.
Ở đây bạn có thể gắn các thuộc tính css riêng như contact, about me, cart, để hiện thị từng icon khác nhau. Và lưu lại tất cả cài đặt.
Lời kết
Và đó là tất cả những gì bạn cần làm để thêm icon trước menu trong thanh menu trong theme genesis framework, hy vọng bài viết này sẽ hữu ích cho bạn.
Chúc thành công!
Trả lời