Issue with Icon borders

Beaver Builder
1

Hey guys, I have a section on a new site I’m working on that uses an icon group, with background colors on the icons, and borders on the background. When using font - awesome icons it works fine, but whenever using icons from one of the other icon directories, it makes like a half border. Not sure why this is…

2

thanks for the help again, in advance, by the way!

3

Hi Seth,

Would it be possible for you to provide a link to a page where this is happening, please?

Thanks,
Danny

4

yeah http://projectlets.testdomainforsethwebsite.com

in the middle of the page you’ll see the top row of 3 font awesome icons, and the next row 2 samples. one is the 2nd font directory in there, and the next icon is the 3rd font directory.

youll see the borders are only half circles.

5

idk if it makes a difference but I’m in safari btw

6

Hi Seth,

I believe this is an issue with the actual font library and not with Beaver Builder. To resolve your issue, what I would suggest is you add a custom class to any icon group modules that use those icons. Then apply the following CSS to that class name.

For example;

.your-custom-class {
  box-sizing: content-box;
}

Thanks,
Danny

7

just applied that. the first icon that was affected still shows that the border tinges off to about 1 PX at the bottom, instead of 2 at the top. but the 2nd icon it worked perfectly for

8

Are you adding the border yourself via custom CSS?

Thanks,
Danny

9

yes because i don’t see that option by default

10

Hi Seth,

Sorry I should have told you to use this from the beginning. Instead of using box-sizing: content-box, please remove that and replace with:

.your-custom-class {
  overflow: hidden;
}

This will resolve the issue.

Thanks,
Danny

11

thanks I appreciate it. is there a reason that happens? just so I understand it and don’t need to ask about it in the future?

12

Hi Seth,

I believe this is related to the font library styling and font awesome has additional styling that isn’t being affected. I will keep looking into this, as I haven’t experienced this before.

When I have some more information, I will reply here.

Thanks,
Danny