Gần đây khi sử dụng theme genesis mình thấy khá nhiều bạn dùng Genesis eNews Extended để tạo form lấy email khách hàng, tuy nhiên mặc định của Genesis eNews Extended trông khá đơn giản, vậy để làm cho nó đẹp hơn bài viết này mình sẽ hướng dẫn các bạn cách thêm biểu tượng email trước Genesis eNews Extended một cách đơn giản.
Xem thêm tạo form đăng ký email với Genesis eNews Extended.
Và hướng dẫn này các bạn có thể áp dụng vào bất cứ thứ gì trên website của bạn, bằng cách thêm các biểu tượng khác nhau vào từng khu vực khác nhau sử dụng icon của Dashicons và thêm CSS vào style.css.
Và đây là kết quả bạn nhận được sau khi đọc xong bài viết này.
Bước 1: Thêm biểu tượng Dashicons vào genesis
Hướng dẫn này sử dụng Dashicons để hiển thị biểu tượng email. Dashicons sẽ cần phải được add vào tập tin functions.php của genesis trước khi sử dụng chúng. Bạn có thể thêm điều này bằng cách sao chép toàn bộ nội dung mã code bên dưới dán vào file functions.php trong thư mục child theme của mình.
contents/themes/sample/functions.php thay đổi cho phù hợp chủ đề của bạn.
//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
function enqueue_dashicons() {
wp_enqueue_style( 'dashicons' );
}
Bước 2: Tùy chỉnh CSS để hiển thị icon
Tương tự như trên bạn chỉ cần sao chép nội dung mã và dán vào file style.css là xong. nội dung mã.
.enews-widget .widget-title::before {
content: "\f466";
display: inline-block;
font: 50px/1 "dashicons";
margin-right: 20px;
vertical-align: text-top;
}
.enews .widget-title {
font-size: 3.2rem;
}
Lưu ý: Bạn với mã này bạn có thể tùy chỉnh kích thước font chữ cho phù hợp với chủ đề của mình.
Cuối cùng hãy lưu lại tất cả các thiết lập của bạn, và quay lại trang chủ và xem kết quả nào!
