Icon with transparent background and white border

Beaver Builder
6

Hi - sorry for delayed response.

I have a demo up to try to solve this - details and admin account below.

Here’s the child theme css so far:

/* Icon border */

.fl-icon i, .fl-icon i::before {
background: none!important;
border-radius: 100%;
color: #ffffff;

}
.fl-icon i {
border: #fff solid 3px;
padding: 40px;
}

Problems I am having - in rough order of importance:

  1. The border is not circular, it varies depending on icon dimensions (circular border radius needs fixed dimensions which i suspect requires js).

  2. My aim is to target only icons with a transparent background but my current css targets all - can’t see a class for transparent bg so unsure how to select it.

That’s it really. Thanks.