[alrick]

I’m pretty fine with editing php or js, but I’d like some pointers here, please advise:
What is the icon set used for menu items and what file do I edit to extend it with new ones that I put into /themes/lafka/styles/flaticon/font/flaticon.css ?

[Althemist]

Hi alrick,

Sorry for the late reply. We had a national holiday (long weekend) in our country.

icon set used for the menu (and some content elements like Icon, Icon Box, Icon Teaser with Lightbox etc.) is a custom set by Flaticon.

I am afraid adding icons there wouldn’t be easy, as it’s not just adding the new icons in the CSS.

A lot files must be altered.

I’d ask our lead developer Alex to give you directions, but please note it’d not be an easy job to do.

Regards,
Dimitar

[Alex]

Hi alrick,

Fast food icons are downloaded from flaticon.com. I think it is this pack: https://www.flaticon.com/packs/fast-food-45

As my colleague said, you need to make changes on many places if you want to add or completely override the icons.

So I will just point where you need to make changes. Please keep in mind that this is not a guide and we will not be responsible for those changes. It is also recommended to do the changes in child theme, so you don’t loose them after updating the theme.

– Font files: /lafka/styles/flaticon/font/
– Define each icon in order to be used in the mega menu editor: wp-content/themes/lafka/js/lafka-back.js:45
– In order to use your font also in the WPBakery Page Builder, you need to make changes also in the lafka-plugin: lafka-plugin/lafka-plugin.php:552

Regards,
Alex

[alrick]

Thank you Dimitar and Alex

I’ve dequeued standart flaticon.css and then enqueued my own css and js to handle my icon font set.
Here’s how I reset the icons in menu editor for anyone interested:

(function ($) {
	"use strict";
	$(document).ready(function () {
        // Init fonticonpicker on menu edit
        $(document).on('mousedown', "#menu-to-edit a.item-edit", function (e) {
            $(e.currentTarget).parents('.menu-item').find("input.lafka-menu-icons").fontIconPicker().setIcons(
                ['icon-popcorn', 'icon-tea', 'icon-chinese-food', 'icon-tomato-sauce', 'icon-cola-1', 'icon-burger-2', 'icon-burger-1', 'icon-fried-potatoes', 'icon-coffee', 'icon-burger', 'icon-ice-cream-1', 'icon-cola', 'icon-milkshake', 'icon-sauces', 'icon-hot-dog-1', 'icon-chicken-leg-1', 'icon-croissant', 'icon-cheese', 'icon-sausage', 'icon-fried-egg', 'icon-fried-chicken', 'icon-serving-dish', 'icon-pizza-slice', 'icon-chef-hat', 'icon-meat', 'icon-ice-cream', 'icon-donut', 'icon-rice', 'icon-package', 'icon-kebab', 'icon-delivery', 'icon-food-truck', 'icon-waiter-1', 'icon-waiter', 'icon-taco', 'icon-chips', 'icon-soda', 'icon-take-away', 'icon-fork', 'icon-coffee-cup', 'icon-waffle', 'icon-beer', 'icon-chicken-leg', 'icon-pitcher', 'icon-coffee-machine', 'icon-noodles', 'icon-menu', 'icon-hot-dog', 'icon-breakfast', 'icon-french-fries',
                'icon-food-and-restaurant', 'icon-sushi', 'icon-sushi-2', 'icon-sushi-1', 'icon-salad', 'icon-salad-2', 'icon-noodles-box', 'icon-ice-cream1', 'icon-vegan']	
            );
        });
    });
})(window.jQuery);

[Althemist]

Hi alrick,

Thanks for sharing your approach. I believe it would be really helpful to other users with similar needs.

Regards,
Dimitar

[alrick]

My pleasure. I want to add that I’ve used IcoMoon to generate the font out of SVG icons set.

Also, I’ve seen new approach in Oxygen Builder where svg sets are used instead of fonts. This is more speed optimized approach as no font is loaded (1 less http request andsome 10-100 KB less bandwidth). Only SVG definition of icon is put into DOM tree and then <use>d as a shadow dom node in specific place where it needs to be displayed. Cool stuff if you’re a performance freak 🙂

[zeina.jfr]

This reply has been marked as private.

[Althemist]

You can’t load the new icons to be visible in the mega menu editor. As we already explained in the other topic, you can only replace the existing icons with custom CSS modifying the their :before selector.

[zeina.jfr]

This reply has been marked as private.

[Althemist]

Hello zeina.jfr,

There is really no need to post the same questions in two topics. Please, always post in your own topic. We have already answered there.

[xfox]

hello @alrick ,

Is it possible for you to help us by leaving a tutorial on how you have changed your icons? please

[adelafi]

i really need the same tutorial

[Althemist]

Hello adelafi,

There are instructions above by @Alex and @lrick.

However, note that you’d need a pretty decent coding skills in order to change the icon font and there is simply no way to just ADD some icons to the existing font.

[Author]

Posts