Ainfographie.com logo animé

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):

WooCommerce Builder

Vous devez vous connecter pour publier un commentaire.
Menu