Adding Custom Icons

Please note: this tutorial is a customization and requires PHP knowledge.

If you would like to add additional font icons to UberMenu, you can register those icons via PHP.

Requirements

The extension works only with font icons (as opposed to SVG or images)
You must register any CSS/font assets separately
The icon markup must be in the following format:

<i class="{icon-class}"></i>

Registering icons

To register your own icons, you can add some code to your child theme’s functions.php. Replace the placeholders with appropriate values for your custom icons. Once the icons are registered, they will appear in the menu item icon selector.

add_action( 'after_setup_theme' , 'my_custom_icons' , 20 );
function my_custom_icons(){
   if( !function_exists( 'umicons_register_icons' ) ) return;
   umicons_register_icons( 'icon-set-slug' , array(
      'title' => 'Icon Set Title', //A title for this icon set, e.g. 'Font Awesome'
      'class_prefix' => 'prefix-', //The prefix for classes - e.g. 'fa '
      'iconmap' => array( //A map of icon classes to icon titles
         'icon-class-name-1' => array(
            'title' => 'Icon Title 1',
         ),
         'icon-class-name-2' => array(
            'title' => 'Icon Title 2',
         ),
         //list additional icons to register
      )
   ));
}

Output

The registered icons above would create the output

<i class="prefix-icon-class-name-1"></i>
<i class="prefix-icon-class-name-2"></i>

Example: Fontello

Here’s an example of registering 3 icons from Fontello:

add_action( 'after_setup_theme' , 'fontello_custom_icons' , 20 );
function fontello_custom_icons(){
   if( !function_exists( 'umicons_register_icons' ) ) return;
   umicons_register_icons( 'fontello' , array(
      'title' => 'Fontello', 
      'class_prefix' => 'icon-',
      'iconmap' => array(
         'paper-plane' => array(
            'title' => 'Paper Plane',
         ),
         'music' => array(
            'title' => 'Music',
         ),
         'mail' => array(
            'title' => 'Mail',
         ),
         //list additional icons to register
      )
   ));
}

The markup output from these icons would be:

<i class="icon-paper-plane"></i>
<i class="icon-music"></i>
<i class="icon-mail"></i>

You would still need to register the appropriate stylesheet and font assets (using wp_enqueue_style), both on the front end and in the admin, for the icons to appear.