Color of only one Icon with text block on same product page

[NovoEurope]

Hello,

I have changed the color of both icon and text on my icon and text block. Now I want to add another new block of Icon with text and it generates the same colour for the first icon text. I am not able to make it back to original black color as it will change the first block of icon with text as well. Anyone who can help pleas?

[BSSCommerce-B2B · Accepted solution]

@NovoEurope ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
li.icon-with-text__item:first-child span.icon-with-text-custom--icon_with_text_custom_r8cyWM {
  color: black!important
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[Moeed]

Hey @NovoEurope 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[NovoEurope]

Thank you for your reply, no password is enabled and this is the URL. Thank you.

https://novo-stores.com/products/magicmoment-iphone-protection-case-get-protection-and-style-in-on

[BSSCommerce-B2B]

@NovoEurope ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
li.icon-with-text__item:first-child span.icon-with-text-custom--icon_with_text_custom_r8cyWM {
  color: black!important
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[Moeed · Accepted solution]

Hey @NovoEurope 

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:first-child span.icon-with-text-custom--icon_with_text_custom_r8cyWM {
    color: black !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[BSSCommerce-B2B · Accepted solution]

@NovoEurope ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
li.icon-with-text__item:first-child span.icon-with-text-custom--icon_with_text_custom_r8cyWM {
  color: black!important
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[NovoEurope]

You guys are genius, thank you!

[BSSCommerce-B2B]

@NovoEurope , Glad to help you 😊

[Harris3]

Hi @NovoEurope,

You can try to add a unique class to each block. This will ensure that each icon and text block has its own styling. You should assign a unique class to each block, which will allow you to style each block separately without affecting the others.

In your theme editor (Online Store > Themes > Customize), find the section where you’ve added the icon and text blocks, and for the new block, add a unique class in the HTML or Liquid code.

This should help you