Design

How To Integrate Ionicons To The vc_icon Shortcode of WPBakery Visual Composer ?

Written by Ninetheme January 15, 2018 0 comment

This is one of the key achievements in WordPress history, which is page maker of WPBakery Visual Composer . So let’s learn to how to add an icon list to its open structure:

Step 1 :

First off, let’s select an icon font family. In this topic, we’re going to integrate the Ionicons library. These fonts come with a couple of files. You need to insert those files in the Fonts folder in your theme and then insert the ionicons.min.css to the Css folder and now lets start to integrate to the vc_icon shortcode:
We’re opening a function here and we’ll transfer data to the variable named $param to through getParam and then lets send a Ionicons string value to selectbox in vc icon shortcode. Let’s update vc_icon with the vc_update_shortcode_param () function in the last line and there will be a new icon selection in shortcode.

function yourprefix_add_ionicons( ) { 
$param = WPBMap::getParam( 'vc_icon', 'type' ); 
$param['value'][__( 'Ionicons', 'bon' )] = 'ionicons';
vc_update_shortcode_param( 'vc_icon', $param ); 
} 
add_filter( 'init', 'yourprefix_add_ionicons', 40 );

Step 2 :

Now, if Ionicons is selected from the selectbox options in vc_icon shortcode, let’s introduce the icon list, you can use the following codes.

function quarto_add_font_picker()
{
vc_add_param(
'vc_icon',
array(
'type' => 'iconpicker',
'weight' => 1,
'heading' => esc_html__('Icon', 'quarto'),
'param_name' => 'icon_ionicons',
'settings' => array(
'emptyIcon' => false,
'type' => 'ionicons',
'iconsPerPage' => 200,
),
'dependency' => array(
'element' => 'type',
'value' => 'ionicons',
),
)
);
}
add_filter('vc_after_init', 'quarto_add_font_picker', 40);

Step 3 :

As a final step, we place the classes of the icons in an array to the area in vc_icon. Please pay your attention to the end of this function, where vc_iconpicker-type-ionicons is.

function yourprefix_icon_array() {
return array(
array('ionicons ion-alert' => 'alert'),
array('ionicons ion-alert-circled' => 'alert-circled'),
array('ionicons ion-android-add' => 'android-add'),
);
}
add_filter( 'vc_iconpicker-type-ionicons', 'yourprefix_icon_array' );

Conclusion

We’ve put all the icons in an array for you andyou just need to copy-paste these codes to get a full list of ionicons. Using this example, you can integrate all other font families into Visual Composer. All codes are here

You must be logged in to post a comment.