Yep. Hello Ae! Như Flatsome hiện tại chúng ta có iconbox, nhưng chỉ cho upload image. Nhu cầu của nhiều anh em lại thích lựa chọn icon từ fontawesome.
Thông thường muốn dùng thì ae phải trải qua nhiều công đoạn để xử lý thành dạng ảnh.
Vì thế code này ra đời giúp ae có thể chọn icon fontawesome.
Thành quả sau khi thực hiện!
Demo cụ thể ở theme Bags
Bắt đầu thôi!
Tạo element iconbox mới cho flatsome theme
add_action('ux_builder_setup', 'isures_2718_iconbox_custom');
function isures_2718_iconbox_custom()
{
add_ux_builder_shortcode('isures_icon_box', array(
'name' => __('iSures Icon Box'),
'priority' => -2,
'category' => __('thietkewebgiarehcm.com'),
'options' => array(
'text_head' => array(
'type' => 'textfield',
'heading' => __('Text Head'),
'default' => '',
),
'text_bottom' => array(
'type' => 'textfield',
'heading' => __('Text Bottom'),
'default' => '',
),
'text_color' => array(
'type' => 'colorpicker',
'heading' => __('Text Color'),
'format' => 'rgb',
),
'link_text' => array(
'type' => 'textfield',
'heading' => 'Link',
'default' => ''
),
'icon' => array(
'type' => 'select',
'heading' => 'Chọn Icon',
'options' => array(
'' => 'None',
'fas fa-plane-departure' => 'iSures Plane',
'fas fa-wallet' => 'iSures Wallet',
'fas fa-gift' => 'iSures Gift',
'fas fa-headphones-alt' => 'iSures Headphone',
'far fa-dot-circle' => 'iSures Dot',
'fas fa-globe' => 'iSures World',
'fas fa-phone-volume' => 'iSures Call',
'fas fa-home' => 'iSures Home',
'fas fa-life-ring' => 'iSures Rings',
'far fa-money-bill-alt' => 'iSures Money',
'fas fa-star' => 'iSures Star',
'fas fa-university' => 'iSures Bank',
'fas fa-car' => 'iSures Car',
'far fa-check-circle' => 'iSures Check',
'fas fa-wrench' => 'iSures Wrench',
'fa fa-book' => 'iSures Book',
'fas fa-shield-alt' => 'iSures Shield',
'fas fa-sync' => 'iSures Sync',
'fas fa-map-marker-alt' => 'iSures Map',
'icon-envelop' => 'iSures Envelope',
'icon-facebook' => 'iSures Facebook',
'icon-map-pin-fill' => 'iSures Map Pen',
'icon-menu' => 'iSures Menu',
'icon-phone' => 'iSures Phone',
'icon-youtube' => 'iSures Youtube',
'fas fa-angle-right' => 'iSures Arrow Right',
'fas fa-history' => 'iSures History',
'fas fa-users' => 'iSures Users'
),
),
),
));
}
Đoạn code trên nhằm tạo ra 1 element iconbox mới. Bây giờ trong trình ux_builder đã xuất hiện 1 element mang tên iSures iCon Box.
Để ý từ dòng code 34 đến 62 đây là chỗ để ae nhúng thêm icon từ fontawesome.
Cách nhúng như nào.? rất đơn giản thôi.
B1: Truy cập vào fontawesome.com
B2: Tìm icon ưa thích
Sau khi tìm được icon ưa thích click vào và copy class như hình dưới
B3: với cấu trúc ‘fas fa-users‘ => ‘iSures Users‘,
Key là đoạn in nghiêng ( = với class bạn vừa copy ở bước trên)
Value thích đặt gì đặt.
Úi dồi ôi, quá ngon. Vào uxbuilder để xem chúng ta có gì rồi.?
Hiển thị shortcode iconbox ra frontend.
add_shortcode('isures_icon_box', 'isures_2718_axtract_isures_icon_box');
function isures_2718_axtract_isures_icon_box($atts, $content = null)
{
extract(shortcode_atts(array(
'text_head' => '',
'text_bottom' => '',
'text_color' => '',
'icon' => '',
'link_text' => '',
), $atts));
ob_start();
// var_dump($atts);
?>
<div class="isures-wrap--iconbox">
<?php if ($link_text) {
echo '<a href="' . $link_text . '">';
} ?>
<div class="isures-iconbox--icon" style="color:<?php echo $text_color; ?>;">
<?php if ($icon) {
echo get_flatsome_icon($icon);
} ?>
</div>
<div class="isures-iconbox--content">
<?php
if ($text_head) {
echo ' <p class="isures-text--head" style="color:' . $text_color . ';">' . $text_head . '</p>';
}
?>
<?php
if ($text_bottom) {
echo ' <p class="isures-text--bottom">' . $text_bottom . '</p>';
}
?>
</div>
<?php if ($link_text) {
echo '</a>';
} ?>
</div>
<?php
$content = ob_get_contents();
ob_end_clean();
return $content;
}
Oke rồi đấy. Bây giờ thêm 1 tí css làm đẹp cho nó ha.
/* icon box */
.isures-wrap--iconbox , .isures-wrap--iconbox a{
display: flex;
align-items: center;
}
.isures-iconbox--icon {
font-size: 30px;
margin: 0;
width: 60px;
height: 60px;
line-height: 58px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 5px;
display: block;
text-align: center;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.isures-iconbox--content {
padding-left: 15px;
}
.isures-iconbox--content p {
margin: 0;
}
p.isures-text--head {
font-weight: bold;
text-transform: uppercase;
}
Full code bỏ vào function.php childtheme.
add_action('ux_builder_setup', 'isures_2718_iconbox_custom');
function isures_2718_iconbox_custom()
{
add_ux_builder_shortcode('isures_icon_box', array(
'name' => __('iSures Icon Box'),
'priority' => -2,
'category' => __('thietkewebgiarehcm.com'),
'options' => array(
'text_head' => array(
'type' => 'textfield',
'heading' => __('Text Head'),
'default' => '',
),
'text_bottom' => array(
'type' => 'textfield',
'heading' => __('Text Bottom'),
'default' => '',
),
'text_color' => array(
'type' => 'colorpicker',
'heading' => __('Text Color'),
'format' => 'rgb',
),
'link_text' => array(
'type' => 'textfield',
'heading' => 'Link',
'default' => ''
),
'icon' => array(
'type' => 'select',
'heading' => 'Chọn Icon',
'options' => array(
'' => 'None',
'fas fa-plane-departure' => 'iSures Plane',
'fas fa-wallet' => 'iSures Wallet',
'fas fa-gift' => 'iSures Gift',
'fas fa-headphones-alt' => 'iSures Headphone',
'far fa-dot-circle' => 'iSures Dot',
'fas fa-globe' => 'iSures World',
'fas fa-phone-volume' => 'iSures Call',
'fas fa-home' => 'iSures Home',
'fas fa-life-ring' => 'iSures Rings',
'far fa-money-bill-alt' => 'iSures Money',
'fas fa-star' => 'iSures Star',
'fas fa-university' => 'iSures Bank',
'fas fa-car' => 'iSures Car',
'far fa-check-circle' => 'iSures Check',
'fas fa-wrench' => 'iSures Wrench',
'fa fa-book' => 'iSures Book',
'fas fa-shield-alt' => 'iSures Shield',
'fas fa-sync' => 'iSures Sync',
'fas fa-map-marker-alt' => 'iSures Map',
'icon-envelop' => 'iSures Envelope',
'icon-facebook' => 'iSures Facebook',
'icon-map-pin-fill' => 'iSures Map Pen',
'icon-menu' => 'iSures Menu',
'icon-phone' => 'iSures Phone',
'icon-youtube' => 'iSures Youtube',
'fas fa-angle-right' => 'iSures Arrow Right',
'fas fa-history' => 'iSures History',
'fas fa-users' => 'iSures Users'
),
),
),
));
}
add_shortcode('isures_icon_box', 'isures_2718_axtract_isures_icon_box');
function isures_2718_axtract_isures_icon_box($atts, $content = null)
{
extract(shortcode_atts(array(
'text_head' => '',
'text_bottom' => '',
'text_color' => '',
'icon' => '',
'link_text' => '',
), $atts));
ob_start();
// var_dump($atts);
?>
<div class="isures-wrap--iconbox">
<?php if ($link_text) {
echo '<a href="' . $link_text . '">';
} ?>
<div class="isures-iconbox--icon" style="color:<?php echo $text_color; ?>;">
<?php if ($icon) {
echo get_flatsome_icon($icon);
} ?>
</div>
<div class="isures-iconbox--content">
<?php
if ($text_head) {
echo ' <p class="isures-text--head" style="color:' . $text_color . ';">' . $text_head . '</p>';
}
?>
<?php
if ($text_bottom) {
echo ' <p class="isures-text--bottom">' . $text_bottom . '</p>';
}
?>
</div>
<?php if ($link_text) {
echo '</a>';
} ?>
</div>
<?php
$content = ob_get_contents();
ob_end_clean();
return $content;
}
add_action('wp_footer','isures_2718_iconbox_style');
function isures_2718_iconbox_style(){
?>
<style>
/* icon box */
.isures-wrap--iconbox , .isures-wrap--iconbox a{
display: flex;
align-items: center;
}
.isures-iconbox--icon {
font-size: 30px;
margin: 0;
width: 60px;
height: 60px;
line-height: 58px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 5px;
display: block;
text-align: center;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.isures-iconbox--content {
padding-left: 15px;
}
.isures-iconbox--content p {
margin: 0;
}
p.isures-text--head {
font-weight: bold;
text-transform: uppercase;
}
</style>
<?php
}
Trong trường hợp add code nhưng vẫn không hiện được icon. Bạn cần nhúng thêm fontawesome vào theme nhé. Có nhiều cách nhưng mình xin thị làm cách nhanh nhất là dùng CDN.
Bỏ vào header script nha.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
Yeah. Chúc ae thành công ha. Thất bại thì cũng nhắn 1 tiếng mình biết với nhé 🙂
- Hướng dẫn fix lỗi “Notice: ob_end_flush(): failed to send buffer of zlib output compression (1)”
- Hướng dẫn thêm hiệu ứng Placeholder loading cho sản phẩm
- Custom lại field số điện thoại tại trang thanh toán
- Cách ẩn giá sản phẩm khỏi Google
- Hiện thêm ảnh sản phẩm tại trang thanh toán
- Code ẩn Edit Product che mất tùy chọn khi đăng sản phẩm