Icon Alignment

Support
#1

Hi Everyone,

I have some troubles with aligning my icons in the center. I used the following styling:

display: inline-block; width: 3em; height: 3em; border: 4px solid; font-size: 2.5em; line-height: 2.815em; text-align: center; color: #ac1100; border-radius: 100em;

Anybody knows how to align the icons in the center of the circle?

Thanks!

#2

Hi Bjorn,

You have a unique use case, that is why the icon inside the border sits at the top. The icon itself is added using the :before CSS line and to force that to be centered you need to add the CSS code below:

[data-x-icon-s]:before {
    content: attr(data-x-icon-s);
    transform: translateY(-50%);
    display: block;
    margin-top: 50%;
}

The code above will affect all the icons and it might cause side effects on other sections of the website. That is why I suggest that you click the Customize tab of the icon element that you used and add a unique class there, such as chr-centered.

Then you will need to change the CSS code to:

.chr-centered[data-x-icon-s]:before {
    content: attr(data-x-icon-s);
    transform: translateY(-50%);
    display: block;
    margin-top: 50%;
}

You can add the CSS code to X > Theme Options > CSS.

Thank you.

#4

Thanks Christopher! This solved my issue!

#5

You’re welcome, Bjorn . We’re happy that your issue is now resolved.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.