Settings for Icons

Beaver Builder
1

Hello,

I would like to know how I can add more values to the icon boxes. If I use a background color, the background is always in a circle. Is there a chance to add custom css class for using a square instead?

Or what if I just want to use a rounded border for my icons? Do I need a custom CSS class as well?

Thanks in advance
Bastian

2

Hey Bastian,

The icons are styled with a border-radius of 100% and that’s how we achieved the circle background. You can override that styling by using the CSS snippet below.

.fl-module-icon .fl-module-content .fl-icon-wrap .fl-icon i, .fl-module-icon .fl-module-content .fl-icon-wrap .fl-icon i:before {
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 0%;
}

You can use the same snippet to apply borders to your icons.

Hope this helps!

Ben