Snippet: Add Custom Icon Font Family To Icon Box

// Add new custom font to Font Family selection in icon box module
add_filter( 'init', function( ) {
	$param = WPBMap::getParam( 'vcex_icon_box', 'icon_type' );
	$param['value'][__( 'YOUR NEW ICON SET NAME', 'total' )] = 'iconset_name';
	vc_update_shortcode_param( 'vcex_icon_box', $param );
}, 40 );



// Add font picker setting to icon box module when you select your font family from the dropdown
add_filter( 'vc_after_init', function() {
	vc_add_param( 'vcex_icon_box', array(
			'type' => 'iconpicker',
			'heading' => esc_html__( 'Icon', 'total' ),
			'param_name' => 'icon_iconset_name',
			'settings' => array(
				'emptyIcon' => true,
				'type' => 'iconset_name',
				'iconsPerPage' => 200,
			),
			'dependency' => array(
				'element' => 'icon_type',
				'value' => 'iconset_name',
			),
			'group' => esc_html__( 'Icon', 'total' ),
		)
	);
}, 40 );



// Add array of your fonts so they can be displayed in the font selector
add_filter( 'vc_iconpicker-type-iconset_name', function() {
	return array(
		array( 'icon_1' => 'Icon 1' ), // Each icon should be added as an array
		array( 'icon_2' => 'Icon 2' ),
		array( 'icon_3' => 'Icon 3' ),
	);
} );



// Load your CSS to display the icons in the Visual Composer Editor
// This is important because Visual Composer settings load in an iFrame if your CSS is just added in style.css
// You won't see the icons to select in the Visual Composer so you must load it as a new stylesheet.
function myprefix_enqueue_font_icon_style_editor() {
	wp_enqueue_style( 'iconset_name', get_stylesheet_directory_uri() . '/css/YOUR_ICONS_STYLESHEET_NAME.css' );
}
add_action( 'vc_backend_editor_enqueue_js_css', 'myprefix_enqueue_font_icon_style_editor' );
add_action( 'vc_frontend_editor_enqueue_js_css', 'myprefix_enqueue_font_icon_style_editor' );



// Optional - Conditionally load CSS for your icon font as requested by modules on the live site
// Only required if you aren't already loading the custom font globally
function myprefix_enqueue_font_icon_style( $font ) {
	if ( ! empty( $font ) && 'iconset_name' == $font ) {
		wp_enqueue_style( 'iconset_name', get_stylesheet_directory_uri() . '/css/YOUR_ICONS_STYLESHEET_NAME.css' );
	}
}
add_action( 'vc_enqueue_font_icon_element', 'myprefix_enqueue_font_icon_style', 10 );