Hi Amir,
Here is the working CSS solution we tried on our test website.
In icon input, use the following example image html code.
<img class="menu-icon-1" src="https://responsive-menu-pro-stg1.expresstech.dev/wp-content/uploads/2019/11/ecological-pools-3.png"/>
Replace the image URL with the actual image url of your website.
Notice the following class in the image HTML code.
class="menu-icon-1"
This is a style class for using custom css to apply a specific style to that image icon.
For every custom image icon, you change the class name, so that you can apply a specific custom style to it.
Use the following custom css to apply a specific style to the above-mentioned image html.
.menu-icon-1{
float:right;
width:30px;
height:auto;
position:relative;
top:5px;
left:10px;
}
You can adjust the width value to change size of image icon on front-end.
Instead of adjusting padding, you can use relative positioning.
You can change the top and left value to adjust the position of the image icon.
This is how it looked on our test site.
https://drive.google.com/open?id=1b4vWccFaQy1LusNYunwH_7Z3n-TtVq5I
Hope this works for you too.
Regards,
Kriti
.