How to add icon select option on visual composer

0
934
how to add visual composer icon select option
How to add visual composer icon select option

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 attribute to the visual composer shortcode which we have created earlier. Mainly, Visual Composer provides a default shortcode attribute type field for add an icon called “iconpicker”. Before doing that we have to add some attributes for icons in the shortcode function. You can see 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.

Previous articleHow to add the custom shortcode on visual composer (Completed)
Md Dalwar is experienced web developer who is working with WordPress and Laravel. He has very helpful mind to help people about any type of thing that he can. Also he provides web related services for peoples. His hobby is writing and coding.