Fix CSS to add icon to Elementor Menu-CodePudding

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.

Thank you!

CodePudding user response：

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

CodePudding user response：

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.