Custom icon uber menu

[Borislav_VD]

Could be possible to add a custom icon on the uber menu? How could be achieved and which must be the extension of the icon .png or which one? thans

[Prasant]

Hello @Borislav.VD,

Thanks for asking.

You can take a look at following articles to add custom icon in Ubermenu:

Adding Custom Icons | UberMenu Icons Knowledgebase

Icon Custom Classes / Custom Icons | UberMenu Icons Knowledgebase

Thanks.

[Borislav_VD]

Thank you . I have read it and i have some doubts about it : ( https://sevenspark.com/docs/ubermenu-icons-adding-custom-icons )

1)what means font icons ? .ico?png,svg,eps,psd ? Which is the extension ?
2) Ok it seem easy
3) and could be possible to help me with point 3 .
( You must register any CSS/font assets separately)

[rad]

Hi there,

Font icons are graphical icons implemented through font. Like font-family and it’s specific to provider or developer of that said font icon. The extension is of course the same as standard fonts.

The icon registration is provided in that sample URL, like this

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
      )
   ));
}

That is assuming that you already have a font icon library in your site, and CSS declaration. Example,

Let’s say you wish to add icon like this, <i class="icon-paper-plane"></i> then there should be an existing CSS to support that.

.icon-paper-plane {
font-family: 'Font_Awesome';
content: '\xf1d8;'
}

Where f1d8; is the specific icon code for Paper Plan, and assuming the we’re utilizing the Font Awesome library ( https://fontawesome.com/cheatsheet ). And by means of utilizing, it’s already pre-installed to your site.

Our theme uses Font Awesome library so you can follow the above direction. But again, you wish to implement a custom icon which could be more complicated as you need to define your own font or icon library. I recommend contacting a developer on his one.

Thanks!