Minimal Icon Box Style In Bright Design Style

[tylerdurdenphi]

Is there a way to use the Minimal Icon Box Style with a different design style such as bright or bold? I’m thinking through CSS but am not sure how.

Thank you.

[laranz – SUPPORT]

Hi,

What do you mean by “minimal icon box” can you explain it, if that is possible we will provide you the Custom CSS.

Thanks,
laranz.

[tylerdurdenphi]

Sure see the screen shots: In the Minimal Design Style the Standard Icon Box just has a large icon at the top of the box – when you switch to Bold Design Style the Standard Icon Box now has a Circle around the Icon.

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

You mean you want a circle over your icon like the Bold style, currently the icons are not showing because you are selecting the same color of its cycle, please change the icon colors in the page builder element and in the Color Customizer, If I am wrong, can you explain it a bit more, sorry for not understanding it.

Let us know,

Thanks,
laranz.

[tylerdurdenphi]

No the opposite. I am using the “Bold Design Style’ for the overall style of the site.
I want there to be no circles in the icon boxes, but instead be the same exact icon boxes that are used when I select “Standard Icon Box” within the “Minimal Design Style”.

In the above screen shot, I want the bottom set of Icon Boxes instead of the Top (all while using BOLD).

[laranz – SUPPORT]

Hi,

Try this Custom CSS in Theme Option.

.bold-design .sf-icon-box-standard .sf-icon-cont.cont-large { background-color: rgba(1, 1, 1, 0) !important; }
.bold-design .sf-icon-box-standard .sf-icon-cont > i { font-size: 83px !important; }

Let us know,

Thanks,
laranz.

[tylerdurdenphi]

Almost works, makes the icons smaller than they should be.

[Kyle – SUPPORT]

Then change the font size int he css Laranz provided above

– Kyle

[tylerdurdenphi]

I changed the 83px in the following code

.bold-design .sf-icon-box-standard .sf-icon-cont > i { font-size: 83px !important; }

but it just pushes the icons down, does not change the size of them.

[Kyle – SUPPORT]

Try this:

.bold-design .sf-icon-box-standard .sf-icon-cont > i, .bold-design .sf-icon-box-standard .sf-icon-cont > i:before, .bold-design .sf-icon-box-standard .sf-icon-cont > span {
  font-size: 56px;
}
.bold-design .sf-icon-box-standard .sf-icon-cont {
  width: 56px;
}

– Kyle

[tylerdurdenphi]

Seems to work, thank you.

[Kyle – SUPPORT]

No problem

– Kyle