Icons are not centered

[marketfresh]

I’m using a Headline with no text and graphic ON to display an icon.
The default styles on .x-graphic-icon:before are causing the icon to not be centered in it’s own background.

When I remove all of the styles (specifically the display, position and margin), the icon is centered perfectly.
This may be a bug.

[ruenel]

Hello @MarketFresh,

Thanks for writing in!

Can you please confirm that you have updated to the latest versions?
Our latest versions is: Pro theme 2.3.6

This latest release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/).

After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please provide us the url of your site so that we can investigate this issue further.

Kindly let us know how it goes.

[marketfresh]

Yes, I’m on 2.3.6.

Here is the site: https://scheduleclosings.com/
I’m currently overriding the default CSS to get the icons centered.

[mldarshana]

Hi Jonathan,

I have checked your site on different browsers and also different screen widths, but I could not identify any issues.

This could be a caching issue that you’re experiencing. Could you please try clearing your browser cache and re-test your issue again. Also try switching to incognito mode and test your issue further.

Thanks!

[marketfresh]

Hi @mldarshana
Did you read the note about me already fixing the problem in CSS?

You would need to inspect and uncheck my CSS overrides to see the problem, or re-create the same style icon on your own test site. I think the problem starts to occur when you increase the icon font size.

[friech]

Hi Jonathan,

I can replicate this issue on my end, but I can’t confirm if this is an issue with the Theme since the other icons center just fine, it can be an issue with that specific icon itself. I’ve submitted this to our issue tracker so the developers will be made aware of it

In the meantime, you add the custom CSS below to your headline’s Element CSS area.

$el .x-graphic-icon.x-graphic-primary:before {
    margin-left: -0.55em !important;
}

Feel free to adjust the 0.55em value, where you see it fits.

Hope it helps,
Cheers!

[marketfresh]

It definitely effects more than just the one icon.

I’m guessing this CSS was in place before the Font Awesome 5 change.

Here is the CSS that I’m using to override the existing CSS which makes all the icons centered no matter what:

.x-graphic-icon:before {
display: initial !important;
position: initial !important;
margin: auto !important;
}

Thanks for submitting it for further review!

[friech]

Hi There,

Thank you for sharing your solution, you can check our changelog page when we release an update to see if a fix for this is included.

Cheers!