[Thủ Thuật Flatsome] Tạo element iconbox với tùy chọn icon là FontAwesome trong Flatsome

Code snippet theme Flatsome WordPress cho tính năng "Tạo Element Iconbox với tùy chọn icon là FontAwesome"

Bước 1 - Tạo một Element Iconbox mới 

Thêm đoạn khai báo Element mới mang tên iSures iCon Box cho Flatsome trong file functions bằng code 

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' => __('nguyenphudung.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'
                ),
            ),
        ),
    ));
}

Dòng code 34 đến 62 đây là chỗ để ta nhúng thêm icon từ fontawesome tùy thích. Bạn có thể thao khảo trên trang fontawesome.

Bước 2 - Hiển thị shortcode iconbox ra frontend

Thêm đoạn code hiển thị short code trong functions.php

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;
}

Bước 3 - Thêm Style cho đẹp

/* 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;
}

Bây giờ bạn có thể vào uxbuilder để thử Element "iSures Icon Box" rồi

Image