Icons in Headline Element Won't Center

[OCcreates]

Pro up to date
WordPress up to date
plugins up to date

Hello,

I have a site with a bunch of Headline elements. Everything works fine, except that most of the icons will not center inside the border. Please see https://pd.occreates.com/live/ or /business for examples. (If the site link no longer works, it’s because we’ve made the site live, so try proudlydekalb.com/live instead.)

Icons such as the book and the bus look centered, but the grad cap is clearly very off center. Headline text is set to center, column text is set to center, all padding/margins/etc are the same on every headline because I made one and then duplicated it to make the rest.

Any ideas as to why some of these icons won’t center align?

Thank you!

[Joao]

Hi There,

Everything looks centered on my end, please provide a screenshot to clarify.

Thanks

[OCcreates]

Here are two screen shots. The shaking hands icon is extremely off center. The grad cap is noticeably off center, and the building slightly off center.

[Joao]

Hi There,

I see what you mean, unfortunately, that is how the font-awesome icons are designed. I agree it is far from perfect when it comes to this design with a border and a background.

In this case, I would suggest you using images instead. You most likely can find similar images to the icons or even better for free on www.freepik.com.

It will require a bit more work but the final results will be better.

Thanks for understanding.

[OCcreates]

Well that’s a big bummer. Why use Font Awesome if we can’t center their icons? Also, here’s a screen shot of a classic icon element with a border above the headline element icon. The classic icon is able to be centered, so why can’t the icons in headlines center?

[basanta]

Hi There,

I understand your concern. I found few icons are miss aligned as all the icons having same style properties and some of icon in different shape, due to which its appears to miss aligned as my colleague mentioned.

Regarding the fact that you posted above some icons really not aligned while you mentioned other are centered.

Would you mind providing the page with the centered icons so we can take a closer look?

Thanks

[OCcreates]

Hi Basanta,

You can see on https://www.proudlydekalb.com/school/ the two graduation caps with DeKalb School District and Northern Illinois University are made with the Classic Icon and the grad cap with Kishwaukee Community College is made with the Headline element.

Thanks for looking!

[paul.r]

Hi,

I will forward this to our web development team for review.

For now, you can add class center-icon to your headline then add this in Theme Options > CSS

.center-icon .x-graphic-icon:before {
   margin: -0.5em 0 0 -0.6em !important;
}

Hope that helps

[OCcreates]

It works, thank you!

[christopher]

Glad that we could be of a help