How To Create Nested Shortcode In Visual Composer For WordPress

Here we learn about how to create nested shortcode in visual composer for WordPress.

Custom code copied and paste into your child theme’s functions.php file.

<?php
class WPBakeryShortCode_michelle_item_lists  extends WPBakeryShortCodesContainer {}
//Register "container" content element. It will hold all your inner (child) content elements
vc_map( array(
  'name'        =>  __( 'Item List', 'qode' ),
    'base'        => 'michelle_item_lists',
    'as_parent'        => array( 'only' => 'michelle_item_lists_item' ), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
    'content_element'     => true,
    'category'       => 'My shortcodes',
    'show_settings_on_create' => true,
    'js_view'       => 'VcColumnView',
    'params' => array(
        array(
            'type'     => 'textfield',
            'holder'    => 'div',
            'class'    => '',
            'heading'     => 'Class',
            'param_name'  => 'class',
            'value'    => '',
            'description' => 'Extra class for ul , Default is pink_list'
    ),       
    )
) );

class WPBakeryShortCode_michelle_item_lists_item  extends WPBakeryShortCodesContainer {}
vc_map( array(
    'name' =>  __( 'List Item', 'qode' ),
    'base' => 'michelle_item_lists_item',
    'as_parent' => array( 'only' => '' ),
    'as_child' => array( 'only' => 'michelle_item_lists' ),
    'content_element' => true,
    'category' => 'My shortcodes',
    'show_settings_on_create' => true,
   
    'params' => array(
            array(
                    'type'    => 'dropdown',
                    'holder'  => 'div',
                    'class'   => '',
                    'heading'   => 'Icon Type',
                    'param_name' => 'icon_type',
                    'value'   => array(
                        'Icon'    => 'icon',
                        'Image Icon' => 'image_icon'
                    ),
                    'save_always' => true,
                    'description' => ''
                ),
                array(
                    'type'     => 'colorpicker',
                    'holder'    => 'div',
                    'class'    => '',
                    'heading'    => 'Icon Color',
                    'param_name'  => 'icon_color',
                    'description' => '',
                    'dependency'  => Array( 'element' => 'icon_type', 'value' => array( 'icon' ) )
                ),
                array(
                    'type'     => 'dropdown',
                    'class'    => '',
                    'heading'    => 'Icon',
                    'param_name'  => 'icon_class',
                    'value'    => child_FontIconsArray(),
                    'description' => '',
                    'dependency'  => array( 'element' => 'icon_type', 'value' => array( 'icon' ) )
                ),
                array(
          'type'    => 'attach_image',
          'holder'   => 'div',
          'class'   => '',
          'heading'   => 'Image Icon',
          'param_name' => 'image_icon',
          'dependency' => array( 'element' => 'icon_type', 'value' => array( 'image_icon' ) )
        ),
        array(
          'type'     => 'textarea',
          'holder'    => 'div',
          'class'    => '',
          'heading'    => 'Content',
          'param_name'  => 'item_text',
          'value'    => '',
          'description' => 'Item content',
        )
      )
    ) );

function child_FontIconsArray() {
  $icons = array (
    'fa-adjust' => '\f042',
    'fa-adn' => '\f170',
    'fa-align-center' => '\f037',
    'fa-align-justify' => '\f039',
    'fa-align-left' => '\f036',
    'fa-align-right' => '\f038',
    'fa-ambulance' => '\f0f9',
    'fa-anchor' => '\f13d',
    'fa-android' => '\f17b',
    'fa-angellist' => '\f209',
    'fa-angle-double-down' => '\f103',
    'fa-angle-double-left' => '\f100',
    'fa-angle-double-right' => '\f101',
    'fa-angle-double-up' => '\f102',
    'fa-angle-down' => '\f107',
    'fa-angle-left' => '\f104',
    'fa-angle-right' => '\f105',
    'fa-angle-up' => '\f106',
    'fa-apple' => '\f179',
    'fa-archive' => '\f187',
    'fa-area-chart' => '\f1fe',
    'fa-arrow-circle-down' => '\f0ab',
    'fa-arrow-circle-left' => '\f0a8',
    'fa-arrow-circle-o-down' => '\f01a',
    'fa-arrow-circle-o-left' => '\f190',
    'fa-arrow-circle-o-right' => '\f18e',
    'fa-arrow-circle-o-up' => '\f01b',
    'fa-arrow-circle-right' => '\f0a9',
    'fa-arrow-circle-up' => '\f0aa',
    'fa-arrow-down' => '\f063',
    'fa-arrow-left' => '\f060',
    'fa-arrow-right' => '\f061',
    'fa-arrow-up' => '\f062',
    'fa-arrows' => '\f047',
    'fa-arrows-alt' => '\f0b2',
    'fa-arrows-h' => '\f07e',
    'fa-arrows-v' => '\f07d',
    'fa-asterisk' => '\f069',
    'fa-at' => '\f1fa',
    'fa-backward' => '\f04a',
    'fa-ban' => '\f05e',
    'fa-bar-chart' => '\f080',
    'fa-barcode' => '\f02a',
    'fa-bars' => '\f0c9',
    'fa-bed' => '\f236',
    'fa-beer' => '\f0fc',
    'fa-behance' => '\f1b4',
    'fa-behance-square' => '\f1b5',
    'fa-bell' => '\f0f3',
    'fa-bell-o' => '\f0a2',
    'fa-bell-slash' => '\f1f6',
    'fa-bell-slash-o' => '\f1f7',
    'fa-bicycle' => '\f206',
    'fa-binoculars' => '\f1e5',
    'fa-birthday-cake' => '\f1fd',
    'fa-bitbucket' => '\f171',
    'fa-bitbucket-square' => '\f172',
    'fa-bold' => '\f032',
    'fa-bolt' => '\f0e7',
    'fa-bomb' => '\f1e2',
    'fa-book' => '\f02d',
    'fa-bookmark' => '\f02e',
    'fa-bookmark-o' => '\f097',
    'fa-briefcase' => '\f0b1',
    'fa-btc' => '\f15a',
    'fa-bug' => '\f188',
    'fa-building' => '\f1ad',
    'fa-building-o' => '\f0f7',
    'fa-bullhorn' => '\f0a1',
    'fa-bullseye' => '\f140',
    'fa-bus' => '\f207',
    'fa-buysellads' => '\f20d',
    'fa-calculator' => '\f1ec',
    'fa-calendar' => '\f073',
    'fa-calendar-o' => '\f133',
    'fa-camera' => '\f030',
    'fa-camera-retro' => '\f083',
    'fa-car' => '\f1b9',
    'fa-caret-down' => '\f0d7',
    'fa-caret-left' => '\f0d9',
    'fa-caret-right' => '\f0da',
    'fa-caret-square-o-down' => '\f150',
    'fa-caret-square-o-left' => '\f191',
    'fa-caret-square-o-right' => '\f152',
    'fa-caret-square-o-up' => '\f151',
    'fa-caret-up' => '\f0d8',
    'fa-cart-arrow-down' => '\f218',
    'fa-cart-plus' => '\f217',
    'fa-cc' => '\f20a',
    'fa-cc-amex' => '\f1f3',
    'fa-cc-discover' => '\f1f2',
    'fa-cc-mastercard' => '\f1f1',
    'fa-cc-paypal' => '\f1f4',
    'fa-cc-stripe' => '\f1f5',
    'fa-cc-visa' => '\f1f0',
    'fa-certificate' => '\f0a3',
    'fa-chain-broken' => '\f127',
    'fa-check' => '\f00c',
    'fa-check-circle' => '\f058',
    'fa-check-circle-o' => '\f05d',
    'fa-check-square' => '\f14a',
    'fa-check-square-o' => '\f046',
    'fa-chevron-circle-down' => '\f13a',
    'fa-chevron-circle-left' => '\f137',
    'fa-chevron-circle-right' => '\f138',
    'fa-chevron-circle-up' => '\f139',
    'fa-chevron-down' => '\f078',
    'fa-chevron-left' => '\f053',
    'fa-chevron-right' => '\f054',
    'fa-chevron-up' => '\f077',
    'fa-child' => '\f1ae',
    'fa-circle' => '\f111',
    'fa-circle-o' => '\f10c',
    'fa-circle-o-notch' => '\f1ce',
    'fa-circle-thin' => '\f1db',
    'fa-clipboard' => '\f0ea',
    'fa-clock-o' => '\f017',
    'fa-cloud' => '\f0c2',
    'fa-cloud-download' => '\f0ed',
    'fa-cloud-upload' => '\f0ee',
    'fa-code' => '\f121',
    'fa-code-fork' => '\f126',
    'fa-codepen' => '\f1cb',
    'fa-coffee' => '\f0f4',
    'fa-cog' => '\f013',
    'fa-cogs' => '\f085',
    'fa-columns' => '\f0db',
    'fa-comment' => '\f075',
    'fa-comment-o' => '\f0e5',
    'fa-comments' => '\f086',
    'fa-comments-o' => '\f0e6',
    'fa-compass' => '\f14e',
    'fa-compress' => '\f066',
    'fa-connectdevelop' => '\f20e',
    'fa-copyright' => '\f1f9',
    'fa-credit-card' => '\f09d',
    'fa-crop' => '\f125',
    'fa-crosshairs' => '\f05b',
    'fa-css3' => '\f13c',
    'fa-cube' => '\f1b2',
    'fa-cubes' => '\f1b3',
    'fa-cutlery' => '\f0f5',
    'fa-dashcube' => '\f210',
    'fa-database' => '\f1c0',
    'fa-delicious' => '\f1a5',
    'fa-desktop' => '\f108',
    'fa-deviantart' => '\f1bd',
    'fa-diamond' => '\f219',
    'fa-digg' => '\f1a6',
    'fa-dot-circle-o' => '\f192',
    'fa-download' => '\f019',
    'fa-dribbble' => '\f17d',
    'fa-dropbox' => '\f16b',
    'fa-drupal' => '\f1a9',
    'fa-eject' => '\f052',
    'fa-ellipsis-h' => '\f141',
    'fa-ellipsis-v' => '\f142',
    'fa-empire' => '\f1d1',
    'fa-envelope' => '\f0e0',
    'fa-envelope-o' => '\f003',
    'fa-envelope-square' => '\f199',
    'fa-eraser' => '\f12d',
    'fa-eur' => '\f153',
    'fa-exchange' => '\f0ec',
    'fa-exclamation' => '\f12a',
    'fa-exclamation-circle' => '\f06a',
    'fa-exclamation-triangle' => '\f071',
    'fa-expand' => '\f065',
    'fa-external-link' => '\f08e',
    'fa-external-link-square' => '\f14c',
    'fa-eye' => '\f06e',
    'fa-eye-slash' => '\f070',
    'fa-eyedropper' => '\f1fb',
    'fa-facebook' => '\f09a',
    'fa-facebook-official' => '\f230',
    'fa-facebook-square' => '\f082',
    'fa-fast-backward' => '\f049',
    'fa-fast-forward' => '\f050',
    'fa-fax' => '\f1ac',
    'fa-female' => '\f182',
    'fa-fighter-jet' => '\f0fb',
    'fa-file' => '\f15b',
    'fa-file-archive-o' => '\f1c6',
    'fa-file-audio-o' => '\f1c7',
    'fa-file-code-o' => '\f1c9',
    'fa-file-excel-o' => '\f1c3',
    'fa-file-image-o' => '\f1c5',
    'fa-file-o' => '\f016',
    'fa-file-pdf-o' => '\f1c1',
    'fa-file-powerpoint-o' => '\f1c4',
    'fa-file-text' => '\f15c',
    'fa-file-text-o' => '\f0f6',
    'fa-file-video-o' => '\f1c8',
    'fa-file-word-o' => '\f1c2',
    'fa-files-o' => '\f0c5',
    'fa-film' => '\f008',
    'fa-filter' => '\f0b0',
    'fa-fire' => '\f06d',
    'fa-fire-extinguisher' => '\f134',
    'fa-flag' => '\f024',
    'fa-flag-checkered' => '\f11e',
    'fa-flag-o' => '\f11d',
    'fa-flask' => '\f0c3',
    'fa-flickr' => '\f16e',
    'fa-floppy-o' => '\f0c7',
    'fa-folder' => '\f07b',
    'fa-folder-o' => '\f114',
    'fa-folder-open' => '\f07c',
    'fa-folder-open-o' => '\f115',
    'fa-font' => '\f031',
    'fa-forumbee' => '\f211',
    'fa-forward' => '\f04e',
    'fa-foursquare' => '\f180',
    'fa-frown-o' => '\f119',
    'fa-futbol-o' => '\f1e3',
    'fa-gamepad' => '\f11b',
    'fa-gavel' => '\f0e3',
    'fa-gbp' => '\f154',
    'fa-gift' => '\f06b',
    'fa-git' => '\f1d3',
    'fa-git-square' => '\f1d2',
    'fa-github' => '\f09b',
    'fa-github-alt' => '\f113',
    'fa-github-square' => '\f092',
    'fa-glass' => '\f000',
    'fa-globe' => '\f0ac',
    'fa-google' => '\f1a0',
    'fa-google-plus' => '\f0d5',
    'fa-google-plus-square' => '\f0d4',
    'fa-google-wallet' => '\f1ee',
    'fa-graduation-cap' => '\f19d',
    'fa-gratipay' => '\f184',
    'fa-h-square' => '\f0fd',
    'fa-hacker-news' => '\f1d4',
    'fa-hand-o-down' => '\f0a7',
    'fa-hand-o-left' => '\f0a5',
    'fa-hand-o-right' => '\f0a4',
    'fa-hand-o-up' => '\f0a6',
    'fa-hdd-o' => '\f0a0',
    'fa-header' => '\f1dc',
    'fa-headphones' => '\f025',
    'fa-heart' => '\f004',
    'fa-heart-o' => '\f08a',
    'fa-heartbeat' => '\f21e',
    'fa-history' => '\f1da',
    'fa-home' => '\f015',
    'fa-hospital-o' => '\f0f8',
    'fa-html5' => '\f13b',
    'fa-ils' => '\f20b',
    'fa-inbox' => '\f01c',
    'fa-indent' => '\f03c',
    'fa-info' => '\f129',
    'fa-info-circle' => '\f05a',
    'fa-inr' => '\f156',
    'fa-instagram' => '\f16d',
    'fa-ioxhost' => '\f208',
    'fa-italic' => '\f033',
    'fa-joomla' => '\f1aa',
    'fa-jpy' => '\f157',
    'fa-jsfiddle' => '\f1cc',
    'fa-key' => '\f084',
    'fa-keyboard-o' => '\f11c',
    'fa-krw' => '\f159',
    'fa-language' => '\f1ab',
    'fa-laptop' => '\f109',
    'fa-lastfm' => '\f202',
    'fa-lastfm-square' => '\f203',
    'fa-leaf' => '\f06c',
    'fa-leanpub' => '\f212',
    'fa-lemon-o' => '\f094',
    'fa-level-down' => '\f149',
    'fa-level-up' => '\f148',
    'fa-life-ring' => '\f1cd',
    'fa-lightbulb-o' => '\f0eb',
    'fa-line-chart' => '\f201',
    'fa-link' => '\f0c1',
    'fa-linkedin' => '\f0e1',
    'fa-linkedin-square' => '\f08c',
    'fa-linux' => '\f17c',
    'fa-list' => '\f03a',
    'fa-list-alt' => '\f022',
    'fa-list-ol' => '\f0cb',
    'fa-list-ul' => '\f0ca',
    'fa-location-arrow' => '\f124',
    'fa-lock' => '\f023',
    'fa-long-arrow-down' => '\f175',
    'fa-long-arrow-left' => '\f177',
    'fa-long-arrow-right' => '\f178',
    'fa-long-arrow-up' => '\f176',
    'fa-magic' => '\f0d0',
    'fa-magnet' => '\f076',
    'fa-male' => '\f183',
    'fa-map-marker' => '\f041',
    'fa-mars' => '\f222',
    'fa-mars-double' => '\f227',
    'fa-mars-stroke' => '\f229',
    'fa-mars-stroke-h' => '\f22b',
    'fa-mars-stroke-v' => '\f22a',
    'fa-maxcdn' => '\f136',
    'fa-meanpath' => '\f20c',
    'fa-medium' => '\f23a',
    'fa-medkit' => '\f0fa',
    'fa-meh-o' => '\f11a',
    'fa-mercury' => '\f223',
    'fa-microphone' => '\f130',
    'fa-microphone-slash' => '\f131',
    'fa-minus' => '\f068',
    'fa-minus-circle' => '\f056',
    'fa-minus-square' => '\f146',
    'fa-minus-square-o' => '\f147',
    'fa-mobile' => '\f10b',
    'fa-money' => '\f0d6',
    'fa-moon-o' => '\f186',
    'fa-motorcycle' => '\f21c',
    'fa-music' => '\f001',
    'fa-neuter' => '\f22c',
    'fa-newspaper-o' => '\f1ea',
    'fa-openid' => '\f19b',
    'fa-outdent' => '\f03b',
    'fa-pagelines' => '\f18c',
    'fa-paint-brush' => '\f1fc',
    'fa-paper-plane' => '\f1d8',
    'fa-paper-plane-o' => '\f1d9',
    'fa-paperclip' => '\f0c6',
    'fa-paragraph' => '\f1dd',
    'fa-pause' => '\f04c',
    'fa-paw' => '\f1b0',
    'fa-paypal' => '\f1ed',
    'fa-pencil' => '\f040',
    'fa-pencil-square' => '\f14b',
    'fa-pencil-square-o' => '\f044',
    'fa-phone' => '\f095',
    'fa-phone-square' => '\f098',
    'fa-picture-o' => '\f03e',
    'fa-pie-chart' => '\f200',
    'fa-pied-piper' => '\f1a7',
    'fa-pied-piper-alt' => '\f1a8',
    'fa-pinterest' => '\f0d2',
    'fa-pinterest-p' => '\f231',
    'fa-pinterest-square' => '\f0d3',
    'fa-plane' => '\f072',
    'fa-play' => '\f04b',
    'fa-play-circle' => '\f144',
    'fa-play-circle-o' => '\f01d',
    'fa-plug' => '\f1e6',
    'fa-plus' => '\f067',
    'fa-plus-circle' => '\f055',
    'fa-plus-square' => '\f0fe',
    'fa-plus-square-o' => '\f196',
    'fa-power-off' => '\f011',
    'fa-print' => '\f02f',
    'fa-puzzle-piece' => '\f12e',
    'fa-qq' => '\f1d6',
    'fa-qrcode' => '\f029',
    'fa-question' => '\f128',
    'fa-question-circle' => '\f059',
    'fa-quote-left' => '\f10d',
    'fa-quote-right' => '\f10e',
    'fa-random' => '\f074',
    'fa-rebel' => '\f1d0',
    'fa-recycle' => '\f1b8',
    'fa-reddit' => '\f1a1',
    'fa-reddit-square' => '\f1a2',
    'fa-refresh' => '\f021',
    'fa-renren' => '\f18b',
    'fa-repeat' => '\f01e',
    'fa-reply' => '\f112',
    'fa-reply-all' => '\f122',
    'fa-retweet' => '\f079',
    'fa-road' => '\f018',
    'fa-rocket' => '\f135',
    'fa-rss' => '\f09e',
    'fa-rss-square' => '\f143',
    'fa-rub' => '\f158',
    'fa-scissors' => '\f0c4',
    'fa-search' => '\f002',
    'fa-search-minus' => '\f010',
    'fa-search-plus' => '\f00e',
    'fa-sellsy' => '\f213',
    'fa-server' => '\f233',
    'fa-share' => '\f064',
    'fa-share-alt' => '\f1e0',
    'fa-share-alt-square' => '\f1e1',
    'fa-share-square' => '\f14d',
    'fa-share-square-o' => '\f045',
    'fa-shield' => '\f132',
    'fa-ship' => '\f21a',
    'fa-shirtsinbulk' => '\f214',
    'fa-shopping-cart' => '\f07a',
    'fa-sign-in' => '\f090',
    'fa-sign-out' => '\f08b',
    'fa-signal' => '\f012',
    'fa-simplybuilt' => '\f215',
    'fa-sitemap' => '\f0e8',
    'fa-skyatlas' => '\f216',
    'fa-skype' => '\f17e',
    'fa-slack' => '\f198',
    'fa-sliders' => '\f1de',
    'fa-slideshare' => '\f1e7',
    'fa-smile-o' => '\f118',
    'fa-sort' => '\f0dc',
    'fa-sort-alpha-asc' => '\f15d',
    'fa-sort-alpha-desc' => '\f15e',
    'fa-sort-amount-asc' => '\f160',
    'fa-sort-amount-desc' => '\f161',
    'fa-sort-asc' => '\f0de',
    'fa-sort-desc' => '\f0dd',
    'fa-sort-numeric-asc' => '\f162',
    'fa-sort-numeric-desc' => '\f163',
    'fa-soundcloud' => '\f1be',
    'fa-space-shuttle' => '\f197',
    'fa-spinner' => '\f110',
    'fa-spoon' => '\f1b1',
    'fa-spotify' => '\f1bc',
    'fa-square' => '\f0c8',
    'fa-square-o' => '\f096',
    'fa-stack-exchange' => '\f18d',
    'fa-stack-overflow' => '\f16c',
    'fa-star' => '\f005',
    'fa-star-half' => '\f089',
    'fa-star-half-o' => '\f123',
    'fa-star-o' => '\f006',
    'fa-steam' => '\f1b6',
    'fa-steam-square' => '\f1b7',
    'fa-step-backward' => '\f048',
    'fa-step-forward' => '\f051',
    'fa-stethoscope' => '\f0f1',
    'fa-stop' => '\f04d',
    'fa-street-view' => '\f21d',
    'fa-strikethrough' => '\f0cc',
    'fa-stumbleupon' => '\f1a4',
    'fa-stumbleupon-circle' => '\f1a3',
    'fa-subscript' => '\f12c',
    'fa-subway' => '\f239',
    'fa-suitcase' => '\f0f2',
    'fa-sun-o' => '\f185',
    'fa-superscript' => '\f12b',
    'fa-table' => '\f0ce',
    'fa-tablet' => '\f10a',
    'fa-tachometer' => '\f0e4',
    'fa-tag' => '\f02b',
    'fa-tags' => '\f02c',
    'fa-tasks' => '\f0ae',
    'fa-taxi' => '\f1ba',
    'fa-tencent-weibo' => '\f1d5',
    'fa-terminal' => '\f120',
    'fa-text-height' => '\f034',
    'fa-text-width' => '\f035',
    'fa-th' => '\f00a',
    'fa-th-large' => '\f009',
    'fa-th-list' => '\f00b',
    'fa-thumb-tack' => '\f08d',
    'fa-thumbs-down' => '\f165',
    'fa-thumbs-o-down' => '\f088',
    'fa-thumbs-o-up' => '\f087',
    'fa-thumbs-up' => '\f164',
    'fa-ticket' => '\f145',
    'fa-times' => '\f00d',
    'fa-times-circle' => '\f057',
    'fa-times-circle-o' => '\f05c',
    'fa-tint' => '\f043',
    'fa-toggle-off' => '\f204',
    'fa-toggle-on' => '\f205',
    'fa-train' => '\f238',
    'fa-transgender' => '\f224',
    'fa-transgender-alt' => '\f225',
    'fa-trash' => '\f1f8',
    'fa-trash-o' => '\f014',
    'fa-tree' => '\f1bb',
    'fa-trello' => '\f181',
    'fa-trophy' => '\f091',
    'fa-truck' => '\f0d1',
    'fa-try' => '\f195',
    'fa-tty' => '\f1e4',
    'fa-tumblr' => '\f173',
    'fa-tumblr-square' => '\f174',
    'fa-twitch' => '\f1e8',
    'fa-twitter' => '\f099',
    'fa-twitter-square' => '\f081',
    'fa-umbrella' => '\f0e9',
    'fa-underline' => '\f0cd',
    'fa-undo' => '\f0e2',
    'fa-university' => '\f19c',
    'fa-unlock' => '\f09c',
    'fa-unlock-alt' => '\f13e',
    'fa-upload' => '\f093',
    'fa-usd' => '\f155',
    'fa-user' => '\f007',
    'fa-user-md' => '\f0f0',
    'fa-user-plus' => '\f234',
    'fa-user-secret' => '\f21b',
    'fa-user-times' => '\f235',
    'fa-users' => '\f0c0',
    'fa-venus' => '\f221',
    'fa-venus-double' => '\f226',
    'fa-venus-mars' => '\f228',
    'fa-viacoin' => '\f237',
    'fa-video-camera' => '\f03d',
    'fa-vimeo-square' => '\f194',
    'fa-vine' => '\f1ca',
    'fa-vk' => '\f189',
    'fa-volume-down' => '\f027',
    'fa-volume-off' => '\f026',
    'fa-volume-up' => '\f028',
    'fa-weibo' => '\f18a',
    'fa-weixin' => '\f1d7',
    'fa-whatsapp' => '\f232',
    'fa-wheelchair' => '\f193',
    'fa-wifi' => '\f1eb',
    'fa-windows' => '\f17a',
    'fa-wordpress' => '\f19a',
    'fa-wrench' => '\f0ad',
    'fa-xing' => '\f168',
    'fa-xing-square' => '\f169',
    'fa-yahoo' => '\f19e',
    'fa-yelp' => '\f1e9',
    'fa-youtube' => '\f167',
    'fa-youtube-play' => '\f16a',
    'fa-youtube-square' => '\f166'
  );
    return $icons;
}

//Above we register shortcode into visual composer by vc_map

//Now for render above shortcode we use add_shortcode function
add_shortcode( 'michelle_item_lists', 'michelle_item_lists_render' );
function michelle_item_lists_render( $atts, $content = null ) {
    extract( shortcode_atts( array( 'class' => 'pink_list' ), $atts ) );
    return "<ul class=' vc_list ". $class ."'>" . apply_filters( 'the_content', $content ). "</ul>";
}
add_shortcode( 'michelle_item_lists_item', 'michelle_item_lists_item_render' );
function michelle_item_lists_item_render( $atts, $content = null ) {
  extract( shortcode_atts( 
    array( 
      'icon_type'  => '',
      'icon_color' =>'#000',
      'icon_class' =>'', 
      'image_icon' =>'',
      'item_text'  =>''
    ),
    $atts
  ) );
  $icon = '';
   
  if( $icon_type == 'icon' ) {
    $icon .='<i class="fa '. $icon_class .'" style="color:'. $icon_color .'"></i>';
  }      
  $icon_image = '';
  if( $icon_type == 'image_icon' ) {
    $image_attributes = wp_get_attachment_image_src( $image_icon );           
    if( $image_attributes ) {
      $img   = $image_attributes[0];
      $icon_image = 'style="background:rgba(0, 0, 0, 0) url('. $img .') no-repeat scroll left center;"';
    }
  }
  return '<li  '. $icon_image .'>'. $icon.$item_text .'</li>';
}
?>

OUTPUT:

1) Page add vc element.

2) Front side view.