How to add Social Media Icons in a Column?

I have a row of 2 columns. Under the text here in column 2, how can I add 4 social media icons, aligned with the image in column 1? Thanks

Hi there,

You can use the Icon shortcode to add proper social media icons. You can use the Raw Content or the Text element to add the icons:

http://demo.theme.co/integrity-1/shortcodes/icons/

That should do it.

That’s exactly what I was looking for, thanks!

Perfect :slight_smile: Glad that we could be of a help :slight_smile:

One more thing - how do I make those icons clickable?

You enclose them in an anchor tag like this.

<a href="#">[x_icon type="adjust"]</a>

An even better way of doing this is by using the Button element. Just disable the text and enable the Graphic and you have an icon button.

Hope that helps.

I’m not loving the buttons…

Is there a way to make the buttons not have borders or shadows, so it doesn’t look boxy?
And how can I change the spacing and alignment?

Oran you give me an example of the doing it the anchor text way? I’m not sure what “[x_icon type=“adjust”]” means…

I had these shortcodes in the Text element:
[x_icon type=“facebook-square”]
[x_icon type=“twitter-square”]
[x_icon type=“instagram”]
[x_icon type=“pinterest-square”]

I liked how I had it this way, just need the icons to be clickable

To disable the shadow, make the shadow transparent.

To change spacing, adjust the margins.

Please see the Button element’s documentation.

If you wish to continue using the shortcode method, I already gave you the way to make icons clickable. I said

Please see this tutorial to learn what an HTML link is.

adjust is only an example. Feel free to use what you need.

Thank you. I followed the instructions and disabled the shadow but it is not transparent, the button with shadow still appears…

Oh I worked it out - I had to set the X and Y Offsets in the Box Shadow to 0

Glad you’ve sorted it out :slight_smile:

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