'Fix CSS to add icon to Elementor Menu

I uploaded icons to my menu using class and css code (Wordpress + Elementor), but I can't remove the space between the icon and the text. Used the following code example:

    .frio 
{
background-image: url('https://zine.unlatino.com/wp-content/uploads/2022/05/icon_frio.svg');
background-repeat: no-repeat;
background-position: left;
background-size: 30px;
padding-left: 5px;
}

Maybe I'm missing correctly modifying the code so that the text follows after the icon. enter image description here

Thank you!

csswordpressmenuiconselementor


Solution 1:[1]

try adding to your class css

margin-left:5px; // based on ur preference
if that dosen't work u can try the following  

position:relative;
left:5px; // based on ur preference

altghought i recommend you try to find what's going on using the development tool

Solution 2:[2]

I don't know if it's the best solution, but removed the CSS and added

<img src="https://zine.unlatino.com/wp-content/uploads/2022/05/icon_frio.svg" width="32" height = "32" />

in front of the text and aligned as expected. If there is any other solution feel free to comment.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 HuSaad
Solution 2 Nico Bietti

Related Questions