2 cách đơn giản để thêm icon font awesome vào genesis framework và child theme.
Hiện tại awesome đã ra phiên bản 4.7.0 và đây là lúc tuyệt vời để chúng ta bắt tay vào trang trí trang website/blog của mình trở lên bắt mắt hơn bao giờ hết.
Bài viết này mình sẽ hưỡng dẫn các bạn 2 cách đơn giản để thêm icon font awesome vào genesis framework và child theme.
Để có thể hiển thị ra trang web bạn cần thêm thuộc tính này vào cuốn file functions.php trong thư mục giao diện của child theme
Chèn Font Awesome vào functions.php child theme.
// Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}
Cách 1: chèn icon font awesome thủ công vào bài viết.
Icon font awesome ở trong bài viết.
<i class="fa fa-phone"></i> +0 1234567890 CSS .fa-phone { font-size: 25px; vertical-align: middle; padding-right: 5px; }
Danh sách biểu tượng có thể xem tại: http://fontawesome.io/icons/
Thêm incon font awesome nav menu items genesis.
Lưu ý: để thêm icon font awesome vào ID item nav menu bạn làm theo hướng dẫn sau.
Click chuột phải vào nội dung muốn thêm.
Ấn chuột phải > Chọn kiểm tra phần tử.
Ở đây sẽ thấy từng id của Nav menu khác nhau.
Bạn chỉ cần nhớ và thêm nội dung vào styles.css là được.
.menu-primary li a:before {
font-family: FontAwesome;
padding-right: 7px;
/*font-style: normal;
font-weight: normal;
text-decoration: inherit;*/
}
/* Home menu item */
#menu-item-1616 a:before {
content: "\f015";
}
/* Pages menu item */
#menu-item-1413 a:before {
content: "\f0e8";
}
/* Categories menu item */
#menu-item-1414 a:before {
content: "\f15b";
}
Thêm biểu tượng icon font awesome vào Widget title.
#meta-3 .widget-title:before {
font-family: FontAwesome;
padding-right: 7px;
content: "\f05a";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
Hoặc các bạn có thể thêm trực tiếp từ menu.
Truy cập vào Bảng điều khiển > menu
Thêm class vào Navigation Label.
Hoặc
Thay thuộc tính trong thẻ class cho phù hợp.
Làm tương tự với những mục còn lại. Ngoài ra bạn có thể xem thêm dịch vụ thiết kế website wordpress.
Đấy là 2 cách đơn giản để thêm vào genesis, bạn còn cách nào khác? hãy chia sẻ với chúng tôi qua khung bình luận bên dưới.
Cảm ơn, chào mừng bạn đã đến với itidea, đây là bài viết đầu tiên của mình, nếu thích nó hãy subscribe blog để theo dõi những chủ đề mới tiếp theo về genesis nhé 🙂
Your friend,
-Vũ Đức Mạnh
