Aligning icons

Beaver Builder
1

Hi!

I am using the Icons tool with Beaver Builder for some icons at the bottom of this page:
http://dev.southernnapa.com/?fl_builder

I’m trying to figure out how to get the icons to be uniform width so that my text is all lined up next to it. Right now the icons have variable width so the text ends up in different positions. This is most noticeable with the ‘map’ icon. It seemed like this automatically happened when I used to use Visual Composer but I may have been using a setting without realizing it. I even tried putting some borders around the icons to try and even them out. While the circle borders are kind of cool, it didn’t seem to help with this particular issue.

There is an example of what I’m going for at the very bottom of this page:
http://the7.dream-demo.com/demo/dance/

2

Hi James,

I believe your CSS should work, but you’re targeting the icons themselves when you use the i. Instead target the fl-icon class, so your CSS looks like this:

.contact-icons .fl-icon { … }

This should resolve your issue.

Thanks,
Danny

3

Thanks. It looks like doing this successfully made the circles all uniform size. The trouble I now have is the icons are no longer in the center of the circles and the text has jumped to a new line for all of them.

4

Hi James,

Can you replace the CSS I gave you and try this, please?

.fl-module-icon.contact-icons .fl-icon i {
  color: #f6f7fa;
  border-style: solid;
  border-color: rgba(246,247,250,0.15);
  border-width: 3px;
  width: 50px;
  height: 50px;
  line-height: 44px;
  border-radius: 500px;
  font-size: 20px;
  text-align: center;
}

Thanks,
Danny

5

Looks PERFECT> http://dev.southernnapa.com/

You are the wind beneath my wings :slight_smile:

6

HAHA!

No problem and thanks for informing us the issue has been resolved.

Thanks,
Danny