I use the e-commerce tool more like a Wishlist collector. For this reason my client would prefer an icon that represents a list rather than a cart or bag.
Is there a way to use a custom icon instead of the 3 ones in the option? I realise that they are lines icon part of a font so that they take the theme colours. If a custom png or svg is not possible, I would consider the list icon part of the e-commerce set of linea (see screenshot). I think it is character "3"
You can substitute the wishlist icon with any icon you want, I have used in this case a SVG icon to demonstrate how to replace the cart icon, see this video:
I have worked out a solution to my question. I downloaded the svg icon, edited it with the stroke colour I wanted, and called it in the CSS using the location on the media folder uploads.
I think I couldn't do it using CSS because the svg itself had colour information directly within the file. But I can be wrong, kind of outside my skills...
Any suggestions welcomed, otherwise this ticket can be set as solved.
Hi,
I use the e-commerce tool more like a Wishlist collector. For this reason my client would prefer an icon that represents a list rather than a cart or bag.
Is there a way to use a custom icon instead of the 3 ones in the option? I realise that they are lines icon part of a font so that they take the theme colours. If a custom png or svg is not possible, I would consider the list icon part of the e-commerce set of linea (see screenshot). I think it is character "3"
Thank you for your help.
Stan
Hi Stan,
You can substitute the wishlist icon with any icon you want, I have used in this case a SVG icon to demonstrate how to replace the cart icon, see this video:
https://d.pr/v/03acvQ
On the video I took the icons from linea icons website:
http://www.linea.io/
So generally this Custom CSS will replace the cart icon:
.cart-icon-link i {display: block;
width: 20px;
height: 28px;
background: url(http://www.linea.io/_assets/_svgs/_basic/basic_sheet_txt.svg) no-repeat;
background-position: bottom;
background-size: 100%;
}
.cart-icon-link i:before {
display: none;
}
I hope you like it.
Hi Arlind,
Thanks for the help, it works well.
If I wanted to change the icon colour to match the site search icon, how would you best recommend? A custom made svg icon with the same colour?
Kind Regards.
Stan
Hi Arlind,
I have worked out a solution to my question. I downloaded the svg icon, edited it with the stroke colour I wanted, and called it in the CSS using the location on the media folder uploads.
I think I couldn't do it using CSS because the svg itself had colour information directly within the file. But I can be wrong, kind of outside my skills...
Any suggestions welcomed, otherwise this ticket can be set as solved.
Thanks again for your help,
Stan
Hi Stan,
You also can change your svg icon color by adding this CSS code in the Custom CSS area:
.header-search-input.menu-skin-main .search-icon a svg { fill: red; }Anyway your solution works too
Have a great day!