Add possibility to change color of icons (check vs cross) within same column

Mikael · November 20, 2020, 12:33pm

As today, it is not possible, in one same column, to have for example RED cross icons for missing features, and GREEN check icons for existing features. This is super standard in feature comparison table, or in pricing tables in general. The CROSS and CHECK icons are today all of the same color. A real no-go!

Thanks for the quick change!

Helga · October 11, 2022, 12:00am

Folks, our former Wishlist portal, where our users shared their requests and suggestions, was transferred to this forum. You’re most welcome to vote, add new ideas, and leave your comments here — we surely will consider them all!

Original Votes: 1

user9050 · May 24, 2024, 6:17pm

It is possible to do this exact thing by applying the following CSS code:

.eapps-pricing-table-column-features-item-icon
.eapps-pricing-table-column-features-item-icon-check {
fill: green !important;
}

.eapps-pricing-table-column-features-item-icon
.eapps-pricing-table-column-features-item-icon-cross {
fill: red !important;
}

That’s awesome to have a code for this, however I’d prefer to have this in the widget settings.

Update: these are the codes if your widget was created AFTER January 22, 2025:

1. Bulb

.es-features-feature-icon-bulb {
  fill: orange !important;
}

2. Check Mark in the Circle

.es-features-feature-icon-checkMarkCircle {
  fill: green !important;
}

3. Cross in the Circle:

.es-features-feature-icon-crossCircle {
  fill: red !important;
}

4. Dash

.es-features-feature-icon-dash {
  fill: violet !important;
}

5. Dot

.es-features-feature-icon-dot {
  fill: blue !important;
}

6. Info

.es-features-feature-icon-info {
  fill: blue !important;
}

7. Like

.es-features-feature-icon-like {
  fill: lightblue !important;
}

8. Love

.es-features-feature-icon-love {
  fill: magenta !important;
}

9. Check Mark

.es-features-feature-icon-check {
  fill: green !important;
}

10. Cross

.es-features-feature-icon-cross {
  fill: red !important;
}

11. Dash in the Circle

.es-features-feature-icon-dashCircle {
  fill: violet !important;
}

12. Plus

.es-features-feature-icon-plus {
  fill: tomato !important;
}

13. Plus in the Circle

.es-features-feature-icon-plusCircle {
  fill: tomato !important;
}

14. Star

.es-features-feature-icon-star {
  fill: yellow !important;
}

15. Stop

.es-features-feature-icon-stop {
  fill: red !important;
}

user1444 · March 8, 2025, 1:22am

I tried the css code mentioned in this thread but it didn’t seem to take. Anyone have an updated option for this by chance? I have a client that would love the icons to be different colors based on the icon.

Isaiah_Bishop1 · March 8, 2025, 3:20am

I am having the same issue and am considering just not using the table because of this. Icon colors are super important in having features stand-out. Would love a quick and simple fix for this

Isaiah_Bishop1 · March 8, 2025, 3:20am

Also, tried using that CSS Code but had no luck

Helga · March 10, 2025, 8:59am

Hi @user1444, @Isaiah_Bishop1!

The thing is that after the recent update the classes were changed, this is why the code above didn’t work for you. Apologies for the inconvenience!

These are the updated codes that should work, please try them out: