How do i change the color of icons with text in Dawn theme 9.0.0

[Viktor27]

Hello, i want to change only the color of the icons with text, icons color only. On shopify dawn theme 9.0.0, i want the color to be #007DFF on those exact shopify icons.

[Moeed]

Hey @Viktor27 
Kindly share your Store URL and Password if enabled

[Viktor27]

no password needed

icons are on the product page

[SideNode]

Can you please inform me of the location where these icons are being displayed?

[Viktor27]

icons are on the product page.

[SideNode]

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->section-main-product.css>Add this code at the bottom.

li.icon-with-text__item svg path {
    fill: #007DFF;
}

Incorporating CSS directly into the theme.Liquid can be considered an unfavorable approach, as it may have adverse effects on site speed at times.

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!

Let me know if need further assistance
Regards,
SideNode

[Moeed · Accepted solution]

Hey @Viktor27 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
li.icon-with-text__item svg path {
    fill: #007DFF !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[SideNode]

hi @Viktor27 

Its SideNode! We will be happy to help you today.

Could you please share the URL of the frontend, so I can view the website and check the issue?

Regards,
SideNode

[Janicebell]

In the theme customizer, navigate to the section that controls the styling of icons with text. This might be under "Header" or "Navigation" settings, depending on how your theme is structured.

Look for the specific settings related to the color of icons with text. In many cases, Shopify themes have pre-defined options for customizing colors.

If there is an option to change the color directly through the theme customizer, use the color picker or enter the desired color code.

If there are no pre-defined options for changing the color of icons with text, you can add custom CSS code to achieve the desired color change.

a. In the theme customizer, click on "Additional CSS" or "Custom CSS" (the wording may vary depending on the theme).

b. Add the following CSS code to target the icons with text and change their color:

css
Copy code
.icon-with-text {
color: #ff0000; /* Replace #ff0000 with the desired color code */
}
Replace "#ff0000" with the color code of your choice.

Save the changes, and the color of icons with text should now be updated on your Shopify store.

Regards
tentacion revenge hoodie

[Janicebell]

In the theme customizer, navigate to the section that controls the styling of icons with text. This might be under "Header" or "Navigation" settings, depending on how your theme is structured.

Look for the specific settings related to the color of icons with text. In many cases, Shopify themes have pre-defined options for customizing colors.

If there is an option to change the color directly through the theme customizer, use the color picker or enter the desired color code.

If there are no pre-defined options for changing the color of icons with text, you can add custom CSS code to achieve the desired color change.

a. In the theme customizer, click on "Additional CSS" or "Custom CSS" (the wording may vary depending on the theme).

b. Add the following CSS code to target the icons with text and change their color:

css
Copy code
.icon-with-text {
color: #ff0000; /* Replace #ff0000 with the desired color code */
}
Replace "#ff0000" with the color code of your choice.

Save the changes, and the color of icons with text should now be updated on your Shopify store.

Regards
tentacion revenge hoodie