What's your biggest current challenge? Have your say in Community Polls along the right column.

How to Change Dawn Theme Icon Color - Dawn Theme

How to Change Dawn Theme Icon Color - Dawn Theme

rvernon23
Excursionist
25 0 9

How do I change the color of the icons to color #004aad?

 

Website Link.. (Drive Scent Diffuser – The Car Flame Diffuser (07638e.myshopify.com)

 

Password: go2253

 

(Screenshot Below)

 

DSS 2.png

Replies 5 (5)

Zqdo
Shopify Partner
803 32 64

Depending on the icon, some do not allow you to change the color of the icon itself. However, you can add a background color to them. Might that work?

banned

AliReviews
Shopify Partner
773 90 358

Hello @rvernon23 ,

 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to Assets folder -> base.css file or theme.scss.liquid file 

Add this following code at the bottom of page

.product-icon {
  color: #004aad;
}

Save changes 

 

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
rvernon23
Excursionist
25 0 9

It didn't work.

ZestardTech
Shopify Partner
5912 1067 1413

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.accordion .icon-accordion {
fill: #004aad;
}

ZestardTech_0-1687324359559.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

StephanHaas
Visitor
1 0 0

Try going to "component-accordion.css" and search for ".accordion .icon-accordion" & change the fill colour.

 

.accordion .icon-accordion {
align-self: center;
fill: #ed8363;
height: calc(var(--font-heading-scale) * 2rem);
margin-right: calc(var(--font-heading-scale) * 1rem);
width: calc(var(--font-heading-scale) * 2rem);
}