As a WordPress theme developer many times we want to select font icons using visual composer. But many people don’t know how to add an icon select option on visual composer. In this article, I will discuss how to add an icon select option on visual composer. So, Let’s begin.
First of all, you have to know that how to add a custom visual composer shortcode to the theme. If you don’t know, it will be a little difficult for you. Firstly, you can learn How to add the custom shortcode on visual composer.
Created Visual Composer shortcode
As usual, we should create a shortcode on a WordPress theme or plugin. Now it will be integrated with Visual Composer. Previously, I have discussed this topic here. You should follow this or you can learn how can integrate custom shortcode with visual composer. This tutorial will help you to add an icon select option in visual composer.
Now add extra visual composer attribute for icon
At this time you have to add some extra attributes to the visual composer shortcode which we have created earlier. Mainly, Visual Composer provides a default shortcode attribute type field for adding an icon called “iconpicker”. Before doing that we have to add some attributes for icons in the shortcode function. You can see the below example.
$atts = shortcode_atts(
array(
'icon_type' => '',
'icon_fw' => '',
'icon_op' => '',
'icon_ty' => '',
'icon_ent' => '',
'icon_ln' => '',
'icon_ms' => '',
'icon_mat' => '',
),
$atts
);You can add more attributes as your wish. Also, you can remove any shortcode which is leading icon type. There are multiple icon types available to insert with your shortcode. Now, you have to add icon fonts using vc_icon_element_fonts_enqueue function. You can follow the below codes.
$icon_class = '';
if (!empty($icon_type)) {
vc_icon_element_fonts_enqueue($icon_type);
if ($icon_type == 'fontawesome' && !empty($icon_fw)) {
$icon_class = $icon_fw;
} elseif ($icon_type == 'openiconic' && !empty($icon_op)) {
$icon_class = $icon_op;
} elseif ($icon_type == 'typicons' && !empty($icon_ty)) {
$icon_class = $icon_ty;
} elseif ($icon_type == 'entypo' && !empty($icon_ent)) {
$icon_class = $icon_ent;
} elseif ($icon_type == 'linecons' && !empty($icon_ln)) {
$icon_class = $icon_ln;
} elseif ($icon_type == 'monosocial' && !empty($icon_ms)) {
$icon_class = $icon_ms;
} else {
$icon_class = $icon_mat;
}
}Now, you can print or echo $icon_class variable any where of your shortcode output. It will be give selected icon type class.
Add attributes to Visual Composer.
You can add attributes to visual as usual process. Also, you follow below codes.
if(function_exists('vc_map')){
$params = array(
'name' => __('Icon Box', 'textdomain'),
'base' => 'iconbox',
'description' => __('Designed iconbox to show.', 'textdomain'),
'params' => array(
array(
"type" => "dropdown",
"admin_label" => TRUE,
"heading" => esc_html__("Icon Type", "textdomain"),
"param_name" => "icon_type",
"value" => array(
esc_html__("Select Icon Type", "textdomain") => "noicon",
esc_html__("Font Aweseme", "textdomain") => "fontawesome",
esc_html__("Open Icon", "textdomain") => "openiconic",
esc_html__("Typicon", "textdomain") => "typicons",
esc_html__("Entypo", "textdomain") => "entypo",
esc_html__("Line Icon", "textdomain") => "linecons",
esc_html__("Mono Social", "textdomain") => "monosocial",
esc_html__("Material", "textdomain") => "material"
),
"description" => esc_html__("Select your desired icon type.", "textdomain"),
),
array(
type" => "iconpicker",
"admin_label" => TRUE,
"heading" => esc_html__("Icon", "textdomain"),
"param_name" => "icon_fw",
"settings" => array(
"type" => "fontawesome",
"iconPerPage" => "1000"
),
"dependency" => array(
"element" => "icon_type",
"value" => "fontawesome"
),
"description" => esc_html__("Select your icon.", "textdomain")
),
array(
"type" => "iconpicker",
"admin_label" => TRUE,
"heading" => esc_html__("Icon", "textdomain"),
"param_name" => "icon_op",
"settings" => array(
"type" => "openiconic",
"iconPerPage" => "300"
),
"dependency" => array(
"element" => "icon_type",
"value" => "openiconic"
),
"description" => esc_html__("Select your desired icon.", "textdomain")
),
array(
"type" => "iconpicker",
"admin_label" => TRUE,
"heading" => esc_html__("Icon", "textdomain"),
"param_name" => "icon_ty",
"settings" => array(
"type" => "typicons",
"iconPerPage" => "1000"
),
"dependency" => array(
"element" => "icon_type",
"value" => "typicons"
),
"description" => esc_html__("Select your desired icon.", "textdomain")
),
array(
"type" => "iconpicker",
"admin_label" => TRUE,
"heading" => esc_html__("Icon", "textdomain"),
"param_name" => "icon_ent",
"settings" => array(
"type" => "entypo",
"iconPerPage" => "300"
),
"dependency" => array(
"element" => "icon_type",
"value" => "entypo"
),
"description" => esc_html__("Select your desired icon.", "textdomain")
),
array(
"type" => "iconpicker",
"admin_label" => TRUE,
"heading" => esc_html__("Icon", "textdomain"),
"param_name" => "icon_ln",
"settings" => array(
"type" => "linecons",
"iconPerPage" => "1000"
),
"dependency" => array(
"element" => "icon_type",
"value" => "linecons"
),
"description" => esc_html__("Select your desired icon.", "textdomain")
),
array(
"type" => "iconpicker",
"admin_label" => TRUE,
"heading" => esc_html__("Icon", "textdomain"),
"param_name" => "icon_ms",
"settings" => array(
"type" => "monosocial",
"iconPerPage" => "300"
),
"dependency" => array(
"element" => "icon_type",
"value" => "monosocial"
),
"description" => esc_html__("Select your desired icon.", "textdomain")
),
array(
"type" => "iconpicker",
"admin_label" => TRUE,
"heading" => esc_html__("Icon", "textdomain"),
"param_name" => "icon_mat",
"settings" => array(
"type" => "material",
"iconPerPage" => "300"
),
"dependency" => array(
"element" => "icon_type",
"value" => "material"
),
"description" => esc_html__("Select your desired icon.", "textdomain")
)
);
vc_map($params);
}This is the primary concept to add an icon selector to the visual composer. Also, you can follow visual composer official documentation to get more shortcode ideas like this. If you face any problem with the instruction, you can contact me. I will try to help you.