Change color of feature icons in Pricing Table

@Max Any update on the last message? Thank you!

Hi there, @user2283 :waving_hand:

Yep, it’s possible! Just open the Code Editor mode of the Feature Text field and add a link to the icon using this format: <img src="Icon Link">

In the sample code, you should replace the Icon Link with the link to the needed icon (it should be hosted somewhere). And with the width and height attributes, you can control the size of the icon.

Here is an example of the code that adds a Google Pay icon:

<img src="https://cdn.iconscout.com/icon/free/png-512/free-google-pay-logo-icon-svg-download-png-2944906.png?f=webp&w=512" style="width: 10%; height: auto;">


Try it out and let me know if it worked for you :slightly_smiling_face:

@Max It works. But I want to align them horizontally in middle like if you see moz logo is at bottom aligned. Secondly I want to add some space between the logos. How I can do that? Thank you!

@Max Any update on the last comment? Thank you!

You should add &nbsp;&nbsp; between the icon codes to add some spacing.

I’ve checked your widget and the icons don’t appear on my end, since they are hosted on a private (password-protected) website:


To make it work fine, the icons should be hosted publicly.

If you see at the bottom part of the icons, they are aligned, but the 3rd icon has a smaller height.
To move it a bit higher, just add this attributes at the end of the code: position: relative; top: -10px;

@Max Thanks. It works. Can we increase the width of the particular column? Like I want the features column width to increase and reduce the last two column width. Secondly I’ve the buttons at the button so how we can make them non clickble?

@Max Any update about the last comment? Thank you!

Your request is with our devs now. I’ll get back to you once the solution is ready :slightly_smiling_face:

@Max Okay, thank you. I’m looking forward to your response.

@Max How I can change the font of pricing text?

image

You can change it in the Price section on the Appearance tab:

By the way, would you like to display the price in the non-clickable button (as you’ve previously requested) or you’d prefer to keep the current price view?

@Max I mean the font name not color. Also is it clickable or not?

Ah, sorry for the inconvenience! Here is the code to change the font of the price:

.es-price-value {
  font-family: Calibri !important;
}

If you mean the price value added to the Price section, it’s not clickable :slightly_smiling_face:

@Max I only want to change for $5,188/month not learn more text. Can I do that?

Yep:

.es-layout-comparison-table-container:not(:has(.es-snap-carousel-wrapper)) .es-column-container:nth-child(3) .es-price-value {
font-family: Calibri !important;
}

And what about the price display? Would you keep the current view or prefer to display it inside the non-clickable button?

Hi there, @user2283 :waving_hand:

Thank you for waiting!

Here is a code to individually change the width of each column in the widget:

.es-layout-comparison-table-inner {
  grid-template-columns: 100px 200px 300px 400px;
}

.es-layout-comparison-table-mobile-snap-carousel {
  grid-template-columns: 100px 200px 300px;
}

In the 2nd line of the code, there are 4 values for each column you can adjust to your liking:

In the 6th line of the code, there are 3 values for each column on mobile:


Test it out and let me know if it worked :slightly_smiling_face: