Icon with transparent background and white border

Beaver Builder
1

Hi - I’m trying to get an icon (in this case in the callout module but need to apply generally to site as well) with a transparent background and circular border like this:

icon with border

Could you please provide some guidance on child theme css required (note - as this will also be default icon style for site want avoid editors having to add a class to each instance so need css to over-ride default icon styling)?

Many Thanks.

2

Hey Mark,

Generally speaking, this wouldn’t necessarily be a case of CSS use, but image manipulation. You’ll want to create your icon images as needed as pngs in your preferred image editing program and then upload them to be used in the callout module. Let me know if that helps or if I am missing something here.

Best,
Billy

3

Hi Billy - understand what you’re saying but avoid images as icons (need svg / iconfont for best results on high density displays / scaling etc etc). Must have been a couple of years since I wrestled sprites. So trying to achieve this with an icon (rather than an image) and a border - I think it’s going to need some js for non fixed width / height and border radius unfortunately.

4

I appreciate this is probably not simple / possible by the way :slight_smile:

5

Hey Mark,

Can you show us a page where that icon is in place? Should be possible by setting a border and setting border-radius to 100%. But like Billy said, your best bet is to just include the border on your image. :slight_smile:

Ben

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.

7

[Content Hidden]

8

Hey Mark,

I just checked your site and sorry to say but I don’t think there’s an easy way to achieve this. The icons will not always be square. So one way around it is to specify a width/height for your fa wrapper. But then, you have different sizes for your icons. The android icons on the footer will have a large wrapper, i.e., a big circle around a small icon.

Also, there’s no way to select an image with a transparent background via CSS. The best way around this would be to just create your own icons with the borders.

Ben

9

OK, thanks Ben - just not a fan of using images for icons, don’t scale well and harder to give them a hover state etc.

10

Workable solution: On demo fyi.

Give icon a colour background and a class (eg iconOutline):

/* Icon border */

.iconOutline .fl-icon i, .iconOutline .fl-icon i::before {
 background: none!important;
}
.iconOutline .fl-icon i {
		border: #fff solid 3px;
}

Requires a class for each element or container but working well for me.

11

Hey Mark,

Good to hear you found one! Assigning extra class would be the way to go. That way, you can assign a different class for the icons on the footer since they’re smaller. :slight_smile:

Let us know if can assist further! In the meantime, enjoy BB! :slight_smile:

Ben