How to center icons horizontally

Support
#1

Hi there,

http://lili.decorolux.com/

I have some icons under the rev slider on this page and they are stuck on the left. Can you help position them in the middle with some padding?

Thanks!

#2

Hi there,

Please try to add the icons as a shortcode in a Raw Content element and set the column alignment to center.

#3

Hi!

Thanks for the answer. Close but not quite. I’m aiming to do something like here:

Now my links are in the center: http://lili.decorolux.com/, but unfortunately, they are not centered inside their container.
How can we fix that?

Thanks!

#4

Hi there,

Thanks for the reference link.

You can achieve that look by using the Icon List element in Cornerstone. This element will have the icon and the text options and you can add link to it as well.

By default, the icons will display stacked so in order to center them and display them inline, make sure that the column container alignment is set to center then click on each list icon item and add this in the style field of the each item: display: inline-block; margin: 0 30px;

I have tested this on my setup and it works fine:

#5

Using icons does not have the option to add links.

Workaround?:slight_smile:

#6

Hello There,

In that case, please do the following steps:
1.) In your column settings, please make sure that it is align to the center.

2.) And then you can make use of the icon shortcodes (http://demo.theme.co/integrity-1/shortcodes/icons/) along with the links just like this:

<a href="http://facebook.com/">[x_icon type="facebook-square"] Facebook</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="http://twitter.com/">[x_icon type="twitter-square"] Twitter</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="http://instagram.com/">[x_icon type="instagram"] Instagram</a>

Hope this helps. Please let us know how it goes.

#7

Hi there,

Unfortunately, that does not work.

This is how it looks.

#8

Hi There,

I added this center-socials class to the raw content element.

After that add this custom CSS and everything is working fine now:

.x-raw-content.center-socials a {
    display: inline-block;
}

Cheers!

#9

Thanks that was it!

One more quick question, I want them to open on a new page. I added target="_blank", but it does not seem to work. Any ideas?

Thanks!

#10

Hey There,

I’ve just added the target="_blank" to all the socials link(<a> tags).

It seems to work fine.

Could you please double check?

Thanks.

#11

Thanks, it worked for me as well this time.

#12

Glad it worked.

Cheers!

#13

I am trying to do the same thing except I want to use it to display icons of all the Credit cards on our woocommerce checkout page. Is there another way to do this? I tried using the icon list and the CSS you provided but it just moves each one a little center. It doesn’t put all the icons on a single line. Can you help?

#14

Hi there,

I tried checking your site’s checkout page but I can’t seen to find the icons that you have mentioned.

if the site in question is not the site that is in the license page of your account, please provide us the correct link.

Kindly also post it as a new thread and mention the issue to avoid confusion.

Thank you.