Hi friends,
I am adding a custom icon set to the Icon widget via filter hook, per this guide:
https://siteorigin.com/docs/widgets-bundle/form-building/icons-and-fonts/
Everything seems to work up until the point of saving. After hitting the save button, the icon disappears from the “Choose Icon” button, and the selection is not saved (see screenshot below). The default set of icons all seem to have no problem being saved.
Have I missed something? Is there another action or filter I need to pass data to before saving? My filter hook code is attached below, and also the plugin code itself is on GitHub (https://github.com/ridgekuhn/so-widgets-icon-fap).
Could you help me with stack tracing the save function for debugging? ie, where in the so-widgets-bundle is this form data prepared and passed to the database?
function rjk_sow_icon_fontawesomepro_filter( $icon_families ) {
/** @var string $icon_meta_uri Path to the Font Awesome Pro icon metadata generated by parser.js */
$icon_meta_uri = plugin_dir_url( __FILE__ ) . 'inc/fap-icons.json';
/** @var string $style_uri Path to the Font Awesome Pro stylesheet */
$style_uri = plugin_dir_url( __FILE__ ) . 'css/all.css';
// Cache busting
$style_uri .= '?ver=' . filemtime( plugin_dir_path(__FILE__) . $font . '/style.css' );
/** @var array $styles Set up icon Styles list for SO Icon widget form */
// [key] is rendered as a class name by siteorigin_widget_get_icon()
$styles = array(
'fab' => __( 'Pro - Brands', 'so-widgets-bundle' ),
'fad' => __( 'Pro - Duotone', 'so-widgets-bundle' ),
'fal' => __( 'Pro - Light', 'so-widgets-bundle' ),
'far' => __( 'Pro - Regular', 'so-widgets-bundle' ),
'fas' => __( 'Pro - Solid', 'so-widgets-bundle' )
);
/** @var array $icons Icon metadata generated by parser.js */
$icons = rjk_sow_icon_fontawesomepro_import( $icon_meta_uri );
// Register the icon set with SO Icon widget
$icon_families['fontawesomepro'] = array(
'name' => __( 'Font Awesome Pro', 'so-widgets-bundle' ),
'style_uri' => $style_uri,
'icons' => $icons
);
// Register style list with SO Icon widget
$icon_families['fontawesomepro']['styles'] = $styles;
return $icon_families;
}
add_filter( 'siteorigin_widgets_icon_families', 'rjk_sow_icon_fontawesomepro_filter' );
Hi Ridgekuhn,
I’m sorry to hear you’re having trouble adding custom icons. I attempted to use your plugins but the icon.json file is missing so none of the icons are visible for me during preview, and (potentially related to the missing icons) the following error occurs when you attempt to preview the widget:
Hi Alex, thanks for your response!
Since the plugin uses Font Awesome Pro and this is a public forum, is there an email address I can send a pre-compiled version of the plugin to? Otherwise, the plugin requires a Font Awesome Pro license and npm auth token to compile icons.json and other assets (see the readme for instructions)
Post-compile, the plugin is largely based off of the free Font Awesome set included in
, except it uses the
file instead of hardcoding the
array into the filter hook.
To compile, the Node installer grabs the Font Awesome Pro npm package, parses the
file and converts it to the same array structure used in the
function. (I don’t know what you do in-house for the free Font Awesome set before distributing the plugin code, but this same method could be applied to the free version’s
to update it more easily). It also copies the webfonts from the npm package, and appends the two
classes to the default css/all.css stylesheet (link)
tl;dr, unless I’m mistaken, the only difference between this plugin and the default Font Awesome set should be that the class names aren’t prepended with
oops, sorry, I didn’t realize the code tag would put everything on its own line!
This is a private message.
Hi Alex,
I had to put this project on the shelf for a couple weeks and am just now returning to it.
Renaming it didn’t work, but thanks to your suggestion, I was able to understand the problem. I found that a couple lines earlier, this line is being called: https://github.com/siteorigin/so-widgets-bundle/blob/5f5b695766b342ce3faa00b56a1017ef8d681418/base/inc/fields/icon.class.php#L120
The `siteorigin_widgets_icon_families` filter hook is flexible enough to let you add an array of styles to `$icon_families[‘my_icons’][‘styles’]`, and will create the dropdown menu in the widget for you, etc; but when `SiteOrigin_Widget_Field_Icon::get_value_parts()` tries to get the value parts to save or render the widget, it’s hard-coded to look for a style key beginning with `sow-fa*`, instead of the style keys that were stored in `$icon_families[‘my_icons’][‘styles’]` in the filter hook.
So, the easiest solution for me was to just prefix all my `$icon_families[‘my_icons’][‘styles’]` keys with `sow-fa`, and make sure the corresponding values matched them in `$icon_families[‘my_icons’][‘icons’][$my_icon_name][‘styles’]`.
I’ve also created a patch for the so-widgets-bundle, and a pull request in GitHub to help make this feature a little more flexible.
Thanks!
Hi Ridgekuhn,
Awesome work mate, we really appreciate it. :)
I’ve provided some feedback to your PR.