Return to previous page

Icon Color Change - by freerunner - on WordPress WooCommerce support

This topic has 15 replies, 4 voices, and was last updated 10 years, 7 months ago ago by Robert Hall

freerunner

Participant

May 4, 2015 at 10:10

Is there a way to change the color of the Cart and Search Icons on the vertical Header style 14? Please refer to the red arrows within the provided image, thanks.

I would like the color of these icons to be hex #333333

Please, contact administrator
for this information.

#61253 Copied Theme version: 1.7.1 WooCommerce version: 2.3.8

14 Answers

Robert Hall

Participant

May 4, 2015 at 15:18

Hello,

In this case images with gold color are used. If you want to change color you need upload new images with your own color or edit icons.png file with some program, for example Photoshop.
Please look here: http://custom.captac.co/wp-content/themes/royal/images/sprite/icons.png

Regards,
Robert Hall.

#61375 Copied

freerunner

Participant

May 4, 2015 at 18:57

Thanks for the response. How do I replace the images once I have the new icons made?

#61462 Copied

Robert Hall

Participant

May 4, 2015 at 19:07

You need upload them to wp-content/themes/royal/images/ folder via FTP and add code to custom.css file.
For example, if you upload image like img.png code will be next
background: url(images/img.png) no-repeat 0 0;

Regards,
Robert Hall.

#61468 Copied

freerunner

Participant

May 6, 2015 at 01:08

Thanks for the response. More specifically, what code do I add to the custom.css file to replace the cart icon, and search icon? I uploaded my image files to the image folder via FTP. My image file names are Cart_icon.png and search_icon.png . Please advise….

#61890 Copied
Brian Johnson

Member

May 6, 2015 at 08:25
Hello

You may add following code into the custom.css for search icon:

.fa-search::before{visibility:hidden !important;} .fa-search{background: url(wp-content/themes/royal/images/search_icon.png) no-repeat 0 0 !important;}

and for “add to cart” on single product page:
.cart .button[type="submit"]{background:url(wp-content/themes/royal/images/cart.png) no-repeat 0 0 !important;}
Just replace url() with your own path to image.

With best regards
Brian Johnson
#61943 Copied
Eva Kemp

Participant

May 6, 2015 at 08:26
Hello,

You need use this code:

.ico-sum { width: 25px; height: 29px; background-image: url("images/Cart_icon.png") !important; }

.fa-search::before { content: url("https://custom.captac.co/wp-content/themes/royal/images/search_icon.png"); }

Regards,
Eva Kemp.
#61944 Copied
freerunner

Participant

May 6, 2015 at 08:55

Brian and Eva,

Thanks for the replies, the code you provided doesn’t seem to be working. Am I doing something wrong?

#61962 Copied

Brian Johnson

Member

May 6, 2015 at 09:29

Please tell us what is the path to your icons.

With best regards
Brian Johnson

#61980 Copied

freerunner

Participant

May 6, 2015 at 10:03

I’m not sure. I was told to upload them via FTP into the image folder, so I did. So I am assuming wp-content/themes/royal/images/search_icon.png
wp-content/themes/royal/images/cart_icon.png

Does this help?

#61991 Copied
Brian Johnson

Member

May 6, 2015 at 10:26
Hello
Please use this code for search icon:
.fa-search{background: url(https://custom.captac.co/wp-content/themes/royal/images/search_icon.png) no-repeat 0 !important;}
and this for cart icon:

.ico-sum { width: 29px!important; height: 29px; background-size:cover; background: url("https://custom.captac.co/wp-content/themes/royal/images/Cart_icon.png") 0px 0px no-repeat !important; }

Please clear your browser cache after placing code into the custom.css.

With best regards
8-theme
#61998 Copied
freerunner

Participant

May 6, 2015 at 10:39

The code mostly worked. The New Black Cart Icon is perfect, but the New Black Search Icon is now placed next to the original gold one, so I have two search icons. Please advise….

#62000 Copied
Eva Kemp

Participant

May 6, 2015 at 13:31
Hello,

Please use this code:

.fa-search::before { content: url("https://custom.captac.co/wp-content/themes/royal/images/search_icon.png") !important; }

Regards,
Eva Kemp.
#62070 Copied
freerunner

Participant

May 6, 2015 at 17:39

That worked. Thank you very much.

#62199 Copied

Robert Hall

Participant

May 6, 2015 at 17:48

Hello,

You’re welcome!

Regards,
Robert Hall.

#62204 Copied
Viewing 15 results - 1 through 15 (of 15 total)