Tiếp tục Series Hướng dẫn Genesis Framework, hôm nay mình sẽ giúp các bạn tìm hiểu cách thêm icon vào Theme và child theme Genesis nhanh chóng và đơn giản.
Việc thêm icon vào menu giúp cho người đọc có cái nhìn khách quan hơn về các danh mục bài viết trong blog của bạn. Tạo thiện cảm cho “mỹ quan” của người dùng khiến họ cảm thấy thích thú hơn với việc đọc và tìm hiểu các bài viết trên website của bạn.
Các bước thêm icon vào Menu Genesis Framework
1. Đầu tiên bạn cần thêm code dưới đây vào file functions.php của Genesis Framework hoặc child theme bạn đang sử dụng. Đoạn code này có tác dụng thêm Favicon vào website/blog của bạn.
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 bạn có thể cài luôn Plugin cho nhanh: Font Awesome 4 Menus
2. Truy cập vào Appearance => Menus, vào phần “tùy chọn hiển thị” và chọn “class Css”
thêm <span> class dưới đây vào mục Navigation Label, trước các nhãn. Nó sẽ có dạng như sau:
<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 icon trong Favicon bạn có thể tìm thấy tại đây. Dùng icon wordpress “fa fa-wordpress” như ví dụ bên dưới.
Tiếp theo bạn hãy tiếp tục thêm icon vào các menu khác và “save” lại.
Bạn đã thực hiện được chưa, để lại câu hỏi phải bên dưới để cùng tìm cách giải quyết nếu có lỗi phát sinh nhé!
