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

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'
                ),
            ),
        ),
    ));
}

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

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

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

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

<?php if ($link_text) {

echo '<a href="' . $link_text . '">';

} ?>

<?php if ($icon) {

echo get_flatsome_icon($icon);

} ?>

</div>

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

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

<?php if ($link_text) {

echo '<a href="' . $link_text . '">';

} ?>

<?php if ($icon) {

echo get_flatsome_icon($icon);

} ?>

</div>

<?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

}

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é

Nguồn: https://thietkewebgiarehcm.com/tao-element-iconbox-voi-tuy-chon-icon-la-fontawesome

Flatsome

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

Tạo element iconbox mới cho flatsome theme

Hiển thị shortcode iconbox ra frontend.

Trả lời Hủy

Tạo element iconbox mới cho flatsome theme

Hiển thị shortcode iconbox ra frontend.

Trả lời Hủy

Đăng ký nhận báo giá & khuyến mãi

Đăng nhập