ResolvedMegamenu icon set additions
- This topic has 12 replies, 6 voices, and was last updated 1 year, 11 months ago by
Althemist.
- AuthorPosts
- October 17, 2019 at 6:10 pm #19487
alrick
ParticipantI’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 ?October 21, 2019 at 4:50 pm #19509Althemist
KeymasterHi 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,
DimitarOctober 22, 2019 at 5:24 pm #19542Alex
KeymasterHi 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:552Regards,
AlexNovember 3, 2019 at 4:56 pm #19725alrick
ParticipantThank 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);
November 4, 2019 at 11:36 am #19734Althemist
KeymasterHi alrick,
Thanks for sharing your approach. I believe it would be really helpful to other users with similar needs.
Regards,
DimitarNovember 4, 2019 at 11:49 am #19737alrick
ParticipantMy 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 🙂June 4, 2020 at 2:05 am #23361zeina.jfr
ParticipantThis reply has been marked as private.June 4, 2020 at 3:45 pm #23369Althemist
KeymasterYou 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.
June 5, 2020 at 11:07 am #23408zeina.jfr
ParticipantThis reply has been marked as private.June 5, 2020 at 11:30 am #23426Althemist
KeymasterHello 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.
June 15, 2020 at 7:28 am #23599xfox
Participanthello @alrick ,
Is it possible for you to help us by leaving a tutorial on how you have changed your icons? please
February 21, 2021 at 1:46 am #29037adelafi
Participanti really need the same tutorial
February 22, 2021 at 10:43 am #29050 - AuthorPosts
You must be logged in and have valid license to reply to this topic.