Adding Another Icon Web Font to the Panel

Redux uses Elusive Icons in our panel. Why? @aristath, a good friend of the Redux team designed the icon pack. As a result, any icon we want to use, we can. We understand our choice in icon pack may not match or suit everyone’s needs. This is why we’ve made it super easy to add a new icon pack.  Here’s how:

function newIconFont() {
    // Uncomment this to remove elusive icon from the panel completely
    //wp_deregister_style( 'redux-elusive-icon' );
    //wp_deregister_style( 'redux-elusive-icon-ie7' );

    wp_register_style(
        'redux-font-awesome',
        '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css',
        array(),
        time(),
        'all'
    );  
    wp_enqueue_style( 'redux-font-awesome' );
}
// This example assumes the opt_name is set to redux_demo.  Please replace it with your opt_name value.
add_action( 'redux/page/redux_demo/enqueue', 'newIconFont' );

To use the icons, do the following:

$sections[] = array(
    'title' => __('Home Settings', 'redux-framework-demo'),
    'header' => __('Welcome to the Redux Framework Demo', 'redux-framework-demo'),
    'desc' => __('Redux Framework was created with the developer in mind. It allows for any theme developer to have an advanced theme panel with most of the features a developer would need. For more information check out the Github repo at: <a href="https://github.com/ReduxFramework/Redux-Framework">https://github.com/ReduxFramework/Redux-Framework</a>', 'redux-framework-demo'),
    'icon' => 'fa fa-bell-o',
    'fields' => array( //...

That’s it! You’re good to go!

Tagged:

Comments are closed.