Social icons not showing in header / end of posts / sidebar

[kimc]

Hi, I’ve added my social media accounts to the social section of the X theme settings, but they are only showing up in the footer of the site. I’ve searched the knowledge database and can’t find anywhere where it tells me how to add them to the header, sidebar widget area, and at the end of a post. I only need Facebook, Instagram, PInterest.
Any help is much appreciated.

Thanks!

[basanta]

Hi There,

Thanks for writing in!
To add the social icon in the header widget area, you have to add custom HTML widget and following code to the text widget.

<a href="https://www.facebook.com/ThisIsPhillipIsland/" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>
<a href="https://www.instagram.com/thisisphillipisland" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>
<a href="https://www.pinterest.com.au/thisisphillipisland/" class="pinterest" title="Pinterest" target="_blank" style="outline: none;"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>

I would suggest you to add the social icon in header bar instead of header widget. to do that lease go to X-Theme Option -> Header -> MISCELLANEOUS section you can active the top bar and it will automatically show the social icon.

For the social share icon below to the post content, you have to use any social sharing plugin for that.
You can check this too https://wordpress.org/plugins/ultimate-social-media-icons/ or you can explore more in the plugin directory.

Hope this helps!

[kimc]

Thankyou! Much appreciated. I’ve done it. The icons in the widget with the code are really small, but I’ll have a look at plugins. Any chance you guys would add a social media widget in your next upgrade? thanks!

[friech]

Hi There,

Yes, I’ll add this to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

You can adjust the size of the coded icon by adding an inline style on the anchor tag.

e.g.

<a href="https://www.facebook.com/ThisIsPhillipIsland/" class="facebook" title="Facebook" target="_blank" style="font-size: 20px">

More info about Inline Styles in HTML

Thanks!

[kimc]

Thanks for your help! Quick question, what do I need to put in the shortcode to centre the icons? At the moment they’re on the left. Thanks for your help!

[rad]

Hi @kimc,

You’ll need to the alignment styling in the container, not in the shortcode. Unfortunately, I’m not sure what container your icons have. Would you mind providing a sample URL?

Thanks!