Documentation: UberMenu Icons

Knowledgebase Docs » UberMenu Icons

Adding Custom Icons 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 The extension works only with font icons (as opposed to SVG or images) The icon markup must be in the format 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. Output The registered icons above would create the output Example: Fontello Here’s an example of registering 3 icons from Fontello: The markup output from these icons would be: 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.

View

Icon Custom Classes / Custom Icons 22

If you would like to set a custom font icon in your menu from an icon set that you have loaded on your site, you can use the Custom Icon Class setting. So for example, if your theme includes a camera icon that works like this: then you can set the Custom Icon Class setting to my-camera-icon to add your custom icon to the menu. Note that for this to work, your custom icons need to be able to work with the <i> tag. You may need to custom style your icons to fit with the menu, depending on how they are designed. You also need your icons resources to be loaded already (for example, by your theme) – this just adds markup to the menu, it doesn’t actually load your stylesheets and fonts for any icons. This feature can also be used to add a custom class to an icon that already exists in UberMenu, that you can then use to style however you like. Also note: If you would like to use images as icons, you can upload an Image instead (the Icons feature is specifically for Font Icons) If you would like to register a custom icon set to appear in the icon selection box, see Adding Custom Icons Since version 3.2

View