Icon Box Customization

[morelli74]

Hi,
how can I insert bold text inside the “Icon Box” without using html tags? Also I can change the colors of the icon and the separator from black to a custom color (see attached screenshoot)?

Icon Box: Icon on Mouse Hover

Regards
C.M.

[Zex]

Hello,Morelli!

The Icon box shortcode title already should be a bold (700), but if you want it boldest, you can use the CSS code:

.feature-box h3 {
    font-weight: 900;
}

To change the separator color use this CSS code:

.feature-box h3:after{
border-top: 2px solid #0ABAB5!important;
}

https://prnt.sc/hqhc79

Change the color per your need.

Regards

[morelli74]

Hi Zex,
Ok, but I would like to bold only part of the content not the title, (see the screenshoot) Text bold- Screenshoot

I use the CSS code to change icon on mouse hover:

.fbox-icon:hover i {
background-color: #0abab5!important;
color: #fff!important;
}

I would also have another question, would it be possible to add custom icons to the current list of Icon Box?

Regards
C.M.

[Zex]

Hello Morelli!

Now I see what you need …

Unfortunately, for now, you can’t bold a part of the Icon box content.

But, there is another easy way to do that:

1. Remove the content from the Icon Box element (leave it empty) https://prnt.sc/hqw2ur
2. Prepend the text element to the Icon Box element https://prnt.sc/hqw3af , https://prnt.sc/hqw3pm
3. Enter your text content into textbox element and modify it. https://prnt.sc/hqw44q

For now isn’t possible to add the custom icons. Maybe we implement more icons in some of next updates.

Thank you for the understanding.

Best Regards

[Author]

Posts