Trong nhóm Genesis Facebook, một người dùng đã hỏi,
Chỉ cần tự hỏi liệu có ai trong nhóm tăng cường này có thể giới thiệu hướng dẫn tốt nhất, chi tiết nhất để thêm dashicons vào thanh điều hướng Genesis hay không. Nhiều đánh giá cao
Chúng ta có thể tải Dashicons, chỉ định các lớp cho các mục menu và thêm CSS để hiển thị các biểu tượng trước các mục menu thanh điều hướng.
Bước 1
Thêm phần sau vào functions.php của chủ đề con :
//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
function enqueue_dashicons() {
wp_enqueue_style( 'dashicons' );
}
Bước 2
Tại Appearance> Menus, kéo Screen Options xuống gần trên cùng bên phải và đánh dấu chọn .CSS Classes
Chỉnh sửa menu của bạn và thêm các lớp CSS tùy chỉnh vào các mục menu.
Bước 3
Thêm phần sau vào style.css của chủ đề con :
.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 ở trên để khớp với bộ chọn đại diện cho thanh điều hướng mà bạn muốn thêm các biểu tượng (trước các mục menu)..nav-header
Ngoài ra, hãy đảm bảo rằng bạn chỉ định đúng tên lớp phù hợp với những tên bạn đã đặt cho các mục menu ở bước trước.
Bạn có thể lấy mã cho các biểu tượng khác nhau tại Dashicons | WordPress Developer Resources, nhấp vào biểu tượng mong muốn và nhấp vào Sao chép liên kết CSS.