[Resolved] Font Awesome icon misplacement

[Ricardo]

So as the title says, I am having a weird problem with font awesome icons. Here is my website https://racmma.com ; the first 3 icons that are on a colored circle container have some weird spacing on top of them, already tried to use the inspector to see what is that but no information about margin or padding, besides the ones that I set up on css. I was previously using hestia theme and managed to have this icons centered with my current css, so I don’t know what the problem may be. Awesome theme and features by the way Tom.

[Leo]

Hi there,

The 3 icons in the content?

If so I’m not seeing anything weird about them. Only the CSS you’ve added:
http://www.screencast.com/t/SBe4gpGG0IMh

Those are also added with BB so GP has no control over it.

Let me know if this helps.

[Ricardo]

Yes the 3 font awesome icons have some weird “spacing” at the top of the icon container itself ( the span tag ). You actually need to inspect the icon so you can see what I mean, they are not centered but seems like they have some kind of offset in the y axis.

edit : http://www.screencast.com/t/sBaw3OapNLc.

[Leo]

Hmm I see. That’s weird.

Have you checked with BB yet?

[Ricardo]

Yes I use BB to build my website, the thing is that with the previous theme I had (Hestia) the icons were right in the middle of the circle, so I don’t know if there is some css from gp that this icons are inheriting, I already tried something posted on stackoverflow about setting the container’s font size to 0 but didn’t work.

[Tom]

Strange indeed. I couldn’t see any conflicting CSS causing it.

Doing something like this should fix it:

.service-icon:before {
    position: relative;
    top: -5px;
}

[Ricardo]

Great! is working now! Thanks Tom.

[Tom]

No problem 🙂

[Author]

Posts