Skip to content

Add Custom Icon Font Family To Icon Box

Important

This is no longer required! You can now use the theme's "custom" button to upload and select any custom SVG when choosing your icon. While you can still technically register and use your own font family, it's not recommended. SVG's are much more optimized and will keep your site faster.

This is no longer necessary! You can now use the theme’s “Custom” button to upload and select any SVG for your icon. While it’s still technically possible to register and use your own font family, it’s not recommended. SVGs are more optimized and help keep your site faster.

// 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 );
All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
Related Snippets
Back To Top