Adding Custom Icons

Knowledgebase Docs » UberMenu Icons » Advanced
USEFUL? 10
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

  1. The extension works only with font icons (as opposed to SVG or images)
  2. The icon markup must be in the format
    <i class="{icon-class}"></i>
  3. You must register any CSS/font assets separately

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.

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.