Trang chủ Flatsome Tạo element iconbox với tùy chọn icon là fontawesome

Tạo element iconbox với tùy chọn icon là fontawesome

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!

Tạo element iconbox cho flatsome
Tạo element iconbox cho flatsome

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

Search icon fontawesome
Search icon fontawesome

Sau khi tìm được icon ưa thích click vào và copy class như hình dưới

Copy class icon
Copy class icon

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;
}
Mẫu website hot của tôi

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é 🙂

Đánh giá cho post