Inline social icons

Support
#1

I am trying to make a small set of social icons in a line inside of a block grid. Before I made the icons a hyperlink they were exactly how I wanted, in a nice horizontal row. After I started setting them up in links, the linked icons are now in a vertical column.

I’ve tried giving them a class and styling them with display: inline; or display: inline-block with no luck. Any advice?

my code is as follows

[x_icon class = “inline-icons” style = “font-size: 25px;” type=“facebook-square”]
[x_icon class = “inline-icons” style = “font-size: 25px;” type=“linkedin-square”]
[x_icon style = “font-size: 25px;” type=“youtube-square”]
[x_icon style = “font-size: 25px;” type=“google-plus-square”]
[x_icon style = “font-size: 25px;” type=“instagram”]

#2

Hello @swanhaven,

Thanks for asking. :slight_smile:

The code you have shared will display social icons inline in a horizontal view. Can you please share website URL so we can point you in right direction as there might be some CSS code interfering?

Thanks.

#3

https://rezzimax.swanhaven.co/contact-us/

To bypass the under construction page use the password letmein

#4

Hi There,

The Facebook and linkedin are anchors but the others are not, but that is not the main issue. Please do not put a line-break on your short code because that will be generated as <br> (hard line-break) on the front-end.

Update your shortcode to this:

<a href="#">[x_icon class = "inline-icons" style = "font-size: 25px;" type="facebook-square"]</a><a href="#">[x_icon class = "inline-icons" style = "font-size: 25px;" type="linkedin-square"]</a><a href="#">[x_icon style = "font-size: 25px;" type="youtube-square"]</a><a href="#">[x_icon style = "font-size: 25px;" type="google-plus-square"]</a><a href="#">[x_icon style = "font-size: 25px;" type="instagram"]</a>

As you can see I already wrapped the icon shortcodes on anchor tag, replace those # with your corresponding social page links.

Cheers!

#5

Great thanks! I didn’t release that pro treats a different line as a hard line-break, I was just trying to clean up my code to make it more readable.

#6

You’re welcome.