Loading Custom Icon Fonts

This is an example of how loading a custom font-icon may work. For this example Fontello font is used to create a custom icon set and accompanying CSS.

The following code assumes that you’ve added the Fontello files in the /wp-content/themes/your-theme/fontello/ directory, where the stylesheet is named my-fontello.css.

function enqueue_fontello_font() {
    wp_enqueue_style( 'fontello_icon_font', get_stylesheet_directory_uri() . '/fontello/css/my-fontello.css' );
}

add_action( 'gform_enqueue_scripts', 'enqueue_fontello_font' );
add_action( 'admin_enqueue_scripts', 'enqueue_fontello_font' );


/* Whitelist the font so it is not excluded on isolated template */

function fontello_font_whitelist( $styles ) {
    return array_merge( $styles, array("fontello_icon_font") );
}

add_filter( "gf_supercharge_isolated_styles", "fontello_font_whitelist", 10 );

The above code enqueues the Fontello font both on the WP Admin pages and every time Gravity Forms is loaded on the front-end.

After adding this code you should be able to use your custom icon font via the Image / Icon Selector.