Một bạn trong nhóm facebook có hỏi tôi!
Tôi có thể thêm các biểu tượng trong dashicons vào thanh địa chỉ nav của mình trong genesis framework không?
Chúng ta có thể thêm Dashicons, xác định các lớp cho các mục trình đơn và thêm CSS để chúng hiển thị các biểu tượng trước các mục trình đơn trong thanh nav cho genesis framework.
Đây là một ví dụ với theme sample của genesis.
Xem thêm >> 2 cách đơn giản để thêm icon Font Awesome vào genesis framework và child theme.
Xem thêm >> Thêm Icon vào Menu Genesis Framework.
Làm thế nào để thêm biểu tượng Dashicons trước thanh trình đơn nav trong genesis.
Bước 1: Thêm các tính năng sau vào file functions.php trong child theme.
//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
function enqueue_dashicons() {
wp_enqueue_style( 'dashicons' );
}
Bước 2: Vào Appearance> Menus, kéo Tùy chọn màn hình ở gần phía trên cùng bên phải và đánh dấu CSS Classes.
Chỉnh sửa trình đơn của bạn và thêm các lớp CSS tuỳ chỉnh vào các mục trình đơn.
Bước 3: Thêm đoạn mã dưới đây vào file style.css của child theme.
.nav-header li > a:before {
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'dashicons';
vertical-align: middle;
padding-right: 4px;
display: inline-block;
}
.nav-header li > a:hover:before {
text-decoration: none;
}
.nav-header li.sample > a:before {
content: "\f313";
}
.nav-header li.layouts > a:before {
content: "\f181";
}
.nav-header li.templates > a:before {
content: "\f116";
}
.nav-header li.contact > a:before {
content: "\f466";
}
Bạn có thể cần phải thay thế tất cả các trường hợp .nav-header ở trên để khớp với bộ chọn đại diện cho thanh nav mà bạn muốn thêm các biểu tượng (trước các mục trình đơn).
Note: Đảm bảo chỉ định tên lớp CSS chính xác & phù hợp với những gì bạn đặt cho các mục trình đơn trong bước trước.
Có thể tìm mã cho các biểu tượng khác nhau tại https://developer.wordpress.org/resource/dashicons/, nhấp vào biểu tượng mong muốn và nhấp vào Sao chép liên kết CSS.
