ResolvedMegamenu icon set additions

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #19487
    alrick
    Participant

    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 ?

    #19509
    Althemist
    Keymaster

    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

    #19542
    Alex
    Keymaster

    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

    #19725
    alrick
    Participant

    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);
    #19734
    Althemist
    Keymaster

    Hi alrick,

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

    Regards,
    Dimitar

    #19737
    alrick
    Participant

    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 🙂

    #23361
    zeina.jfr
    Participant
    This reply has been marked as private.
    #23369
    Althemist
    Keymaster

    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.

    #23408
    zeina.jfr
    Participant
    This reply has been marked as private.
    #23426
    Althemist
    Keymaster

    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.

    #23599
    xfox
    Participant

    hello @alrick ,

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register