Custom icon family not showing up on front-end

Hey Guys,

I’ve created a custom widget on top of the widgets bundle. My widget contains some text inputs and one icon input on the back-end.

Now I’ve got the whole thing working except for one thing; the custom icons just won’t show up on the front-end. In the back-end the icon family can be selected and the icons are properly displayed, but when I select one and save the choice won’t stick after saving. On the front-end the text values are displayed and the icon isn’t. When I select an icon in the default provided icon families the icon is shown on the front-end.

Here’s the code:

custom-widgets.php

<?php
/*
Plugin Name: Custom Widgets Bundle
*/

// Register custom widgets folder
function add_custom_widgets_collection($folders){
    $folders[] = plugin_dir_path(__FILE__).'widgets/';
    return $folders;
}
add_filter('siteorigin_widgets_widget_folders', 'add_custom_widgets_collection');

// Register custom icon font for reparaties widget
function client_icon_font__filter( $icon_families ) {
    $icon_families['clinet-reparaties'] = array(
        'name' => __( 'Client reparaties', 'reparatie-widget' ),
        'style_uri' => '/wp-content/plugins/custom-widgets/icons/client-reparaties/styles.css',
        'icons' => array(
            'client-reparatie-icons-battery' => '',
            'client-reparatie-icons-camera' => '',
            'client-reparatie-icons-harddisk' => '',
            'client-reparatie-icons-laptop' => '',
            'client-reparatie-icons-keyboard' => '',
            'client-reparatie-icons-laptop-software' => '',
            'client-reparatie-icons-light-sensor' => '',
            'client-reparatie-icons-microphone' => '',
            'client-reparatie-icons-mid-frame' => '',
            'client-reparatie-icons-mute' => '',
            'client-reparatie-icons-network-antenna' => '',
            'client-reparatie-icons-power' => '',
            'client-reparatie-icons-smartphone' => '',
            'client-reparatie-icons-smartphone-back' => '',
            'client-reparatie-icons-smartphone-back-bottom' => '',
            'client-reparatie-icons-smartphone-back-top' => '',
            'client-reparatie-icons-smartphone-charge' => '',
            'client-reparatie-icons-sound' => '',
            'client-reparatie-icons-tablet' => '',
            'client-reparatie-icons-tablet-back' => '',
            'client-reparatie-icons-tablet-charge' => '',
            'client-reparatie-icons-vibrate' => '',
            'client-reparatie-icons-water' => '',
            'client-reparatie-icons-wifi' => '',
            'client-reparatie-icons-home-button' => ''
        )
    );
    return $icon_families;
}
add_filter( 'siteorigin_widgets_icon_families', 'client_icon_font__filter' );

reparatie-widget.php

<?php
/*
Widget Name: Reparatie widget
Description: Een custom widget voor het weergeven van reparatiemogelijkheden voor ***.
Author: *** - ***
Author URI: ***
*/

class Reparatie_Widget extends SiteOrigin_Widget {

    function __construct() {
    //Here you can do any preparation required before calling the parent constructor, such as including additional files or initializing variables.

        //Call the parent constructor with the required arguments.
        parent::__construct(
            // The unique id for your widget.
            'reparatie-widget',

            // The name of the widget for display purposes.
            __('Reparatie Widget', 'reparatie-widget'),

            // The $widget_options array, which is passed through to WP_Widget.
            // It has a couple of extras like the optional help URL, which should link to your sites help or support page.
            array(
                'description' => __('Een custom widget voor het weergeven van reparatiemogelijkheden voor ***.', 'reparatie-widget-text-domain'),
                'help'        => '***',
            ),

            //The $control_options array, which is passed through to WP_Widget
            array(
            ),

            //The $form_options array, which describes the form fields used to configure SiteOrigin widgets. We'll explain these in more detail later.
            // ‘icoon’, ‘prijs’, ‘titel’, ‘beschrijving’ en ‘url’
            array(
                'title' => array(
                    'type' => 'text',
                    'label' => __('Titel', 'reparatie-widget')
                ),
                'description' => array(
                    'type' => 'text',
                    'label' => __('Beschrijving', 'reparatie-widget')
                ),
                'url' => array(
                    'type' => 'link',
                    'label' => __('Link', 'reparatie-widget')
                ),
                'price' => array(
                    'type' => 'number',
                    'label' => __('Prijs (zonder "€,-", dus alleen getal)', 'reparatie-widget')
                ),
                'icon' => array(
                    'type' => 'icon',
                    'label' => __('Icoon', 'reparatie-widget')
                )
            ),

            //The $base_folder path string.
            plugin_dir_path(__FILE__)
        );
    }

    function get_template_name($instance) {
    	return 'template';
	}

	function get_template_dir($instance) {
	    return 'templates';
	}
}

siteorigin_widget_register('reparatie-widget', __FILE__, 'Reparatie_Widget');

Folder & file structure:
plugins
custom-widgets
custom-widgets.php
icons
client-reparaties
styles.css
fonts
widgets
reparatie-widget
reparatie-widget.php
templates
template.php

I’ve been going over the docs and even the original icon widget code numerous times to see if I missed something, but I can’t seem to figure it out. Can you help me?

Regards,
Bas