Add Custom Icons to Elementor Nav Menus (No Plugins!)
add icon in menu wordpress, add icon to menu elementor, add menu icons to navigation, custom icons elementor, elementor icon css, elementor menu, elementor menu how to, elementor menu icon, elementor nav icon, elementor navigation, elementor navigation how to, elementor tutorial, Elementor Tutorials, how to add menu icon in wordpress without plugin, nav menu elementor, nav menu wordpress elementor, wordpress menu icons, wordpress menu icons plugin, wordpress nav icons
Using this method, you can add your own custom icons to your Elementor navigation menus. You may have seen other methods or workarounds that let you embed Elementor or Font Awesome icons into menus, or plugins that will do the job for you, but this is a simple solution that lets you use *any* image you like as your icon, control which devices it appears on and all without having to install any additional plugins!
Here is the CSS used in the video:
body[data-elementor-device-mode=mobile] .main-nav-contact-usa {
background-image: url(‘/wp-content/uploads/2022/06/us-flag.svg’);
}
body[data-elementor-device-mode=mobile] .main-nav-contact-canada {
background-image: url(‘/wp-content/uploads/2022/06/canada-flag.svg’);
}
body[data-elementor-device-mode=mobile] .main-nav-contact-usa,
body[data-elementor-device-mode=mobile] .main-nav-contact-canada {
background-size: 40px;
background-repeat: no-repeat;
background-position: 30px;
padding-left: 60px;
}
Questions? Comments? Please reach out!
Don’t have Elementor Pro? It’s crazy cheap for the value. Get Elementor Pro (we may get a small kickback for teaching and referring):
Plus de tutoriels pour apprendre à utiliser WordPress :
Outils & ressources pour l’infographie :
Vous devez vous connecter pour publier un commentaire.