how to style a bullet list icon

Question

Hello i am working on a page where i have a lot of bullet list icons which have the colors styled inline.

This gives me a big head ache because my client has told me to change the color more than once

i have tried to find a way to style all at once, but it dosent work for me

This is what am trying

.fa_prepended fa fa-check-circle
{
  color : #f40!important;
}
.fa fa-check-circle
{
  color : #f40!important;
}

trying to change it to red, this is a link to the page am talking about to check

https://vapereneur.clickfunnels.com/optin11026903

any comment and help is welcome thanks

Answer 1

Your bulletpoint icons all have these classes at the same time : .fa_prepended , .fa .fa-check-circle .

The way you wrote it with spaces between class names (and you forgot some dots, fyi) ...

.fa_prepended .fa .fa-check-circle

... it means that these are child items of one another, something like this:

<div class="fa_prepended">
  <div class="fa">
    <div class="fa-check-circle"></div>
  </div>
</div>

But that's not the case.

To fix your CSS remove the spaces between class names:

.fa_prepended.fa.fa-check-circle
{
  color : #f40 !important;
}
.fa.fa-check-circle
{
  color : #f40 !important;
}