我正在尝试将新的字体图标集添加到Visual Composer中,尽管名称出现在下拉列表中;没有加载实际字体图标的下拉列表,我无法弄清楚下面的代码有什么缺失或错误。
任何帮助将非常感激。
// Add new custom font to Font Family selection in icon box module
function reach_add_new_icon_set_to_iconbox( ) {
$param = WPBMap::getParam( 'vc_icon', 'type' );
$param['value'][__( 'Reach Icons', 'reach-rdp' )] = 'reach_icons';
vc_update_shortcode_param( 'vc_icon', $param );
}
add_filter( 'init', 'reach_add_new_icon_set_to_iconbox', 40 );
function reach_add_font_picker() {
vc_add_param( 'vc_icon', array(
'type' => 'iconpicker',
'heading' => esc_html__( 'Icon', 'reach-rdp' ),
'param_name' => 'icons_reach_icons',
'settings' => array(
'emptyIcon' => false,
'type' => 'reach_icons',
'iconsPerPage' => 20,
),
'dependency' => array(
'element' => 'icon_type',
'value' => 'reach_icons',
),
'group' => esc_html__( 'Icon', 'reach-rdp' ),
)
);
}
add_filter( 'vc_after_init', 'reach_add_font_picker', 40 );
function reach_vc_iconpicker_type_reach_icons( $icons ) {
// Add custom icons to array
$icons['Reach Icons'] = array(
array( "icon-arrow-left" => "Arrow Left" ),
);
// Return icons
return $icons;
}
add_filter( 'vc_iconpicker-type-reach_icons', 'reach_vc_iconpicker_type_reach_icons' );
/**
* Register Backend and Frontend CSS Styles
*/
add_action( 'vc_base_register_front_css', 'leadinjection_vc_iconpicker_base_register_css' );
add_action( 'vc_base_register_admin_css', 'leadinjection_vc_iconpicker_base_register_css' );
function leadinjection_vc_iconpicker_base_register_css(){
wp_register_style('reach_icons', get_stylesheet_directory_uri() . '/assets/css/reach-font.css');
}
/**
* Enqueue Backend and Frontend CSS Styles
*/
add_action( 'vc_backend_editor_enqueue_js_css', 'leadinjection_vc_iconpicker_editor_jscss' );
add_action( 'vc_frontend_editor_enqueue_js_css', 'leadinjection_vc_iconpicker_editor_jscss' );
function leadinjection_vc_iconpicker_editor_jscss(){
wp_enqueue_style( 'reach_icons' );
}
看起来你做的事情是正确的,你只需要替换:
add_filter('init....)
至:
add_action('vc_after_init',....)
更新:您还有一个错误的参数名称。它应该是:
'element' => 'type',
我还建议使用weight属性来更好地进行排序:
function reach_add_new_icon_set_to_iconbox( ) {
$param = WPBMap::getParam( 'vc_icon', 'type' );
$param['value'][__( 'Reach Icons', 'reach-rdp' )] = 'reach_icons';
$param['weight'] = 90;
vc_update_shortcode_param( 'vc_icon', $param );
}
和
function reach_add_font_picker() {
vc_add_param( 'vc_icon', array(
'type' => 'iconpicker',
'heading' => esc_html__( 'Icon', 'reach-rdp' ),
'param_name' => 'icons_reach_icons',
'settings' => array(
'emptyIcon' => false,
'type' => 'reach_icons',
'iconsPerPage' => 20,
),
'weight' => 80,
'dependency' => array(
'element' => 'type',
'value' => 'reach_icons',
),
)
);
}
我需要实现完全相同的东西 - 虽然我添加的图标集是从Font Awesome Pro集中选择的图标。使用上面几乎可以解决的答案,这是我完全正常工作的版本。这是在WPBakery的5.5.2版本中测试和使用的。我希望这可以帮助别人!
// In the 'Icon library' dropdown for an icon content type, add a new family of icons.
function fapro_add_to_iconbox() {
$param = WPBMap::getParam( 'vc_icon', 'type' );
$param['value'][ __( 'FontAwesome Pro icons', 'js_composer' ) ] = 'fapro';
vc_update_shortcode_param( 'vc_icon', $param );
}
add_filter( 'vc_after_init', 'fapro_add_to_iconbox', 40 );
// This adds a new parameter to the vc_icon content block.
// This parameter is an icon_picker element,
// that displays when fapro is picked from the dropdown.
function fapro_add_font_picker() {
$settings = array(
'type' => 'iconpicker',
'heading' => __( 'Icon', 'js_composer' ),
'param_name' => 'icon_fapro',
'settings' => array(
'emptyIcon' => false,
'type' => 'fapro',
'iconsPerPage' => 20,
),
'dependency' => array(
'element' => 'type',
'value' => 'fapro',
),
'weight' => '1',
'description' => __( 'Select icon from library.', 'js_composer' ),
);
vc_add_param( 'vc_icon', $settings );
}
add_filter( 'vc_after_init', 'fapro_add_font_picker', 50 );
// Add all the icons we want to display in our font family.
function vc_iconpicker_type_fapro( $icons ) {
// Add custom icons to array.
$fapro_icons = array(
array( 'far fa-bacon' => 'Bacon' ),
array( 'fas fa-hamburger' => 'Hamburger' ),
);
// Return icons.
return $fapro_icons;
}
add_filter( 'vc_iconpicker-type-fapro', 'vc_iconpicker_type_fapro' );
// Enqueue the CSS file so that the icons display in the backend editor.
function enqueue_fapro_font() {
wp_enqueue_style( 'agilechilli-font-awesome', 'https://pro.fontawesome.com/releases/v5.7.2/css/all.css' );
}
add_action( 'vc_backend_editor_enqueue_js_css', 'enqueue_fapro_font' );