Thanks, Andrew! Much appreciated feedback, man. Yeah with as many requests as I got for how to do this, I'm excited to get this one out to the Divi community. ENDLESS possibilities with this method. Thanks again!
Hello! I have followed your tutorial but unfortunately the icons do not display I have instead white square with a question mark what do you think happened? Thanks for your help
Great video Josh. Would be glad if you could tell from where can we get the id's for different icons you used. Those crazy numbers like \e456. Thank you
Hello Josh, you've been very helpful with all you tutorials...theres this i want you to talk about...custom width in divi...i want to go as low as 750px and this is becoming so difficult and i will need your help...
Hi Josh, great video thank you! Is it possible to use this idea of a custom icon also for an unsorted list? So if I am writing a text with bullet points I would like to have my custom icon instead of the bullet points. Is this possible? I have actually no idea how to target those bullets or where to give a CSS class for that. Your answer would be much appreciated! Thanks a lot!
Thanks, Annette! Yeah I think that's definitely possible. I haven't done that myself but I'd imagine you'd add a class to the text module, then CSS that to effect every item. I'll put that on my list to try out. Cheers!
Hey! I’m trying to customize a wishlist such as put icon heart or text etc on image products but i can’t get it so could i do it with divi or shortcode?
Hello i like your tutorial, very helpfull, i starting with menus and wanna know, where exactly you edit the css to add the images, is not clear to me, please can detail where need add this css ?
Amazing tutorial!! I love it. Thanks :) I have a question. The icons on the main menu look great when I have the secundary menu activated, however, if I remove it, all the icons are gone. Do you know why is this happening?
Not sure Juliana. It shouldn't matter whether the top menu is on or off. This tutorial doesn't have the top menu activated so just be sure to follow these steps exactly like I showed then you should be all set!
How do you get the inspector view to show classes and code below the website? Mine, by default, opes to the right and it doesn't feel natural after watching your tuts
Hi Josh I really loved your 3 videos. I am confused in css case. you are opening style sheet in a separate and editing then and changes are coming. I am newbie to Css I am not a code guy. Can you please do a video on how we have to open theme style sheet and edit it like you doing.
Will do, Jagadeesh. I've had a few questions about that so it's on my list! If you're not alright signed up on my email list or subscribed, feel free to do that and I'll let you know when it's up!
Hey, Josh, I tried exactly the way you said and its working fine but having a small doubt: In my mobile view, the submenus are shown with the icons. How to hide them??
Couple different ways you can pull that off but easiest is to add ">" so that it only applies to the parent item. For example: .menu-blog > a:before Give that a go!
hi can you use the blurb icon in the same way you used the web address for the cat because the command below will not work in standard divi .menu-home:before { font-family: 'ETmodules'; content: "\e074";} does not work on navbar even after I class them as so " menu-home
I guess a Child Theme tut is easy to find for DIVI on TH-cam...plugin I'm guessing. Question here is I'm guessing and major website tweaks are probably better resolved through a Child Theme and Custom CSS as leaving the Default DIVI Theme as upgrades could wipe out your custom tweaks??
Yep Paul, you'll want to put all your custom code in a child theme. If note, it'll get overwritten when you update Divi: This might help: aspengrovestudios.com/everything-you-need-to-know-about-using-a-child-theme-with-wordpress-and-divi/
Hey Mike, no problem. I'd recommend installing/creating a basic child theme, then taking all the CSS you have throughout the default Divi theme, then putting all that in your Child Theme stylesheet.css file. Here's a tutorial how to set a child theme up if needed: www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial
mmm did you try clearing your cache and refreshing your browser, Tanya? If there's a firewall in place or any sort of cloudflare of extra caching, sometimes that needs to be cleared as well. But as long as you take the code AND put the classes in the menu (maybe that's the culprit), it should work!
Awesome! You can also check out the revised code in the post. I figured out how to do it without even needing to put a set width in. Now need to redo this tutorial :)
Thanks- actually I could not find it in the style sheet so I added it as an additional CSS. Problem with that is that it then affects all settings and hard to then get alignment of icons between desktop, ipad and iphone layouts. I will check out the revised code.
I did this and it worked great - Thank You! Any idea why all of a sudden, today only some of the pages at DRONERANGER.PRO have larger icons then the other pages?
Nice tutorial Josh, clearly explained and Divi users will love this. Great job! :)
Thanks, Andrew! Much appreciated feedback, man. Yeah with as many requests as I got for how to do this, I'm excited to get this one out to the Divi community. ENDLESS possibilities with this method. Thanks again!
Looks like I just had to give it a try. It works! Thanks again, Josh this was really helpful :-)
Thank you for this tutorial as well, Josh. Is it necessary to upload the icons to Divi fonts or do I just need the code to include them on a site?
Nope not with this method. Just add the code and you're good to go!
Can you pls explain how to make custom link as u shown n this video for solution, about etc
Hello Josh, for some reason the CSS class (optional) is not showing up on inspect, I don't know what the reason could be!
Works Great! van you show us how we can add a custom image/ico as well?
Hello!
I have followed your tutorial but unfortunately the icons do not display I have instead white square with a question mark what do you think happened? Thanks for your help
Great video Josh. Would be glad if you could tell from where can we get the id's for different icons you used. Those crazy numbers like \e456. Thank you
Here ya go: www.elegantthemes.com/blog/resources/elegant-icon-font
@@JoshHallco Thanks alot. ☺️
MashaaALLAH!!AAMEEN!!😍😍😍😍😍😍😍
Just a comment to say thank you. Great tutorial! Looking forward for more!
Thanks so much for the comment and the encouragement!
Hello Josh, you've been very helpful with all you tutorials...theres this i want you to talk about...custom width in divi...i want to go as low as 750px and this is becoming so difficult and i will need your help...
THANK YOU! I did it and it worked out, after some trial and errors.
This is excellent, thank you, do you know of a way to give the icon the same active link colour as the menu item?
Thank you!. But can you explain me where you get to the style sheet?
Me too I haven't the slightest clue nor is he explaining it
Found it he answered it a bit further down
Hi Josh, great video thank you!
Is it possible to use this idea of a custom icon also for an unsorted list? So if I am writing a text with bullet points I would like to have my custom icon instead of the bullet points. Is this possible? I have actually no idea how to target those bullets or where to give a CSS class for that. Your answer would be much appreciated! Thanks a lot!
Thanks, Annette! Yeah I think that's definitely possible. I haven't done that myself but I'd imagine you'd add a class to the text module, then CSS that to effect every item. I'll put that on my list to try out. Cheers!
Hi Josh thank you, were can i get my text editor ?
Any idea why the icons dont appear on my mobile menu? I followed the instructions given step by step I dont understand. Thank you in advance!
Hey Josh!. It seems like the sub menu will be affected from their main menu class..so the result like they have all the same icon.
Good stuff Josh. Thanks for info!
how to put the icon to the right ? sir josh ?
thanks for the tutorial. What if I just want to use icons and hide the entire text?
th-cam.com/video/ZYUdvZ8WoSE/w-d-xo.html
Thank You very much. Very detailed tutorial. I could this for my website.:)
What if we need to show the icons only on hover?
Hey! I’m trying to customize a wishlist such as put icon heart or text etc on image products but i can’t get it so could i do it with divi or shortcode?
Just wanted to check. Though I added icons when I go in with inspect I cannot find the width for each to adjust the spacing. Any advice
Hello i like your tutorial, very helpfull, i starting with menus and wanna know, where exactly you edit the css to add the images, is not clear to me, please can detail where need add this css ?
Here ya go: joshhall.co/where-to-put-your-custom-css-in-divi/
Amazing tutorial!! I love it. Thanks :) I have a question. The icons on the main menu look great when I have the secundary menu activated, however, if I remove it, all the icons are gone. Do you know why is this happening?
Not sure Juliana. It shouldn't matter whether the top menu is on or off. This tutorial doesn't have the top menu activated so just be sure to follow these steps exactly like I showed then you should be all set!
Great! Thanks for replying. I just saw your message. Again, I love your tutorial. This is the result: maimonmantenimiento.com/
Looks great! Well done, Juliana.
Josh Hall Thank you!! :)
How do you get the inspector view to show classes and code below the website? Mine, by default, opes to the right and it doesn't feel natural after watching your tuts
I got it [three dots] = customise dev tools
Hi Josh I really loved your 3 videos. I am confused in css case. you are opening style sheet in a separate and editing then and changes are coming. I am newbie to Css I am not a code guy. Can you please do a video on how we have to open theme style sheet and edit it like you doing.
Will do, Jagadeesh. I've had a few questions about that so it's on my list! If you're not alright signed up on my email list or subscribed, feel free to do that and I'll let you know when it's up!
Thanks bro by the way thank you for quick reply. Haven't expected. Will subscribe to your mailing list. Once again thank you.
No prob man. I'll have that tutorial up soon.
Hey, Josh, I tried exactly the way you said and its working fine but having a small doubt: In my mobile view, the submenus are shown with the icons. How to hide them??
Couple different ways you can pull that off but easiest is to add ">" so that it only applies to the parent item. For example: .menu-blog > a:before
Give that a go!
@@JoshHallco Hey Josh! Thanks for the reply and finally achieved. Thanks a ton again...
Where is the style sheet, where will I find it?
Here ya go! joshhall.co/where-to-put-your-custom-css-in-divi/
Josh, is there a way to have a custom icon only show up for the active menu item?
hi can you use the blurb icon in the same way you used the web address for the cat
because the command below will not work in standard divi
.menu-home:before {
font-family: 'ETmodules';
content: "\e074";}
does not work on navbar
even after I class them as so " menu-home
Yeah that should work, Alan! If you're using a blurb icon, you just need to use that CSS prefix instead of the menu as shown in the tutorial.
Josh, do you have any tutorial to show how to add Chat icon? My child theme came with chat feature that shows up at the bottom right of the page
That I'm not sure. I'd imagine you just take the same principles in this tutorial (find ID or class of that element) and just replace icon.
Where the code should put?
hi josh. have you got a video on how to make the icon navbar with icons mobile responce
Not exactly, Alan but you'll take the method in this tutorial and just adjust the CSS using media queries for mobile!
I guess a Child Theme tut is easy to find for DIVI on TH-cam...plugin I'm guessing. Question here is I'm guessing and major website tweaks are probably better resolved through a Child Theme and Custom CSS as leaving the Default DIVI Theme as upgrades could wipe out your custom tweaks??
Yep Paul, you'll want to put all your custom code in a child theme. If note, it'll get overwritten when you update Divi: This might help: aspengrovestudios.com/everything-you-need-to-know-about-using-a-child-theme-with-wordpress-and-divi/
Josh Hall spot on. I'll check it out after customizing drop down menu icon... on a mission here. Great stuff. Just a bit overwhelmed with CSS
Yeah you have to take it one day and one step at a time. I've been loving CSS for years and I still have much to learn :)
Hey Mike, no problem. I'd recommend installing/creating a basic child theme, then taking all the CSS you have throughout the default Divi theme, then putting all that in your Child Theme stylesheet.css file. Here's a tutorial how to set a child theme up if needed: www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial
If you could past the code on your site then it woould be easy for us...thank you!
thanks bro, u are da best
I cannot get this to work. Copied the code exactly put it into my custom css...nothing happens. What am I missing?
mmm did you try clearing your cache and refreshing your browser, Tanya? If there's a firewall in place or any sort of cloudflare of extra caching, sometimes that needs to be cleared as well. But as long as you take the code AND put the classes in the menu (maybe that's the culprit), it should work!
i ended up using the menu icons plugin and that worked. Thank you for responding!
same here, i think updated version of divi does not support it anymore
How do you access your stylesheet
Here ya go: joshhall.co/where-to-put-your-custom-css-in-divi/
k from here, which need to copy?
hello!
Can you tell me where you put css code.
Here ya go: joshhall.co/where-to-put-your-custom-css-in-divi/
Hi, how do you access the code?
Here ya go: joshhall.co/how-to-access-your-divi-child-theme-stylesheet-through-ftp/
Resolved it.
Awesome! You can also check out the revised code in the post. I figured out how to do it without even needing to put a set width in. Now need to redo this tutorial :)
Thanks- actually I could not find it in the style sheet so I added it as an additional CSS. Problem with that is that it then affects all settings and hard to then get alignment of icons between desktop, ipad and iphone layouts. I will check out the revised code.
I did this and it worked great - Thank You! Any idea why all of a sudden, today only some of the pages at DRONERANGER.PRO have larger icons then the other pages?