StackTips

How to Add Font Awesome Icons to Redux Options Panel

stacktips avtar

Written by

Editorial,  2 min read,  2.85K views, updated on Sept. 17, 2023

Redux WordPress framework includes Elusive Icons by default for your options panel icon needs. Elusive Icons are very limited in number. If you not happy with using Elusive Icons or, just want to include another web font (icon) framework such as Font Awesome, you can do that using the following code snippet.

Add the following code snippet to your redux framework options-init.php file.

// This is your option name where all the Redux data is stored.
$opt_name = 'my_theme_options';
//...

function add_font_awesome_icons() {
    // 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' );
}

add_action('redux/page/' . $opt_name . '/enqueue', 'add_font_awesome_icons');