Add Custom Icon Font Family To Icon Box
This is a very advanced modification for experienced developers. Make sure to change everywhere it says 'iconset_name' to the name of your icon set such as "icomoon" and make sure to edit the 'myprefix_icon_array' function to return an array of all the icons you want to use. Also make sure the CSS for this icon set is being loaded on the site as needed.
// 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)