Easy way to add social media icons to Artful Theme

Can someone give me advice how to easily add social media icons in the footer of the Artful Theme?
Total noob here.

I had to look in to this a bit as I wasn’t sure. I usually work mostly with foundation, stacks, etc., and build my own footer. Here is one way, not sure if it’s the best? Perhaps others can chime in. More or less generate the html code for your social links and copy and paste it into the “Footer” area in settings/general (see pics). If you need help with the html just google “generate html for social links” or similar and there are plenty of resources. Hope that helps. Interested to hear if there is a better way as well.


It might be a little cooler to use the FontAwesome social icons. To include them do this in the main code section (Code → Head):

The include is <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Then in the footer, you could include something like this:

<a href="#"><i class="fa fa-facebook" aria-hidden="true" style="color: white;"></i></a>&nbsp;<a href="#"><i class="fa fa-instagram" aria-hidden="true" style="color: white;"></i></a>

There are two icons there separated by the &nbsp; - this is the effect:

There are probably others on this forum who could give you more styling tips. And of course, substitute your own social links for the “#”.

For more FontAwesome social icons, you can look on this page: Font Awesome Icons

Are you using stacks?

Then there’s a lot of stacks that will build the social media icons for you, for example, the ShareStack. Then you could build stacks partial for the complete footer that you simply add to the bottom of the page.

To teefers point. If using stacks, one could turn “off” the footer (deselect it in site setup), and build their own footer. At that point it’s very easy to add social icons and links in numerous ways using html (fontawesome) or any number of stacks developed for this purpose. Let us know how it goes.

Thanks for all the replies!
Sorry for the delayed reply, I got cought up with other matters but now I have bought Stacks and I am going to look into all the advice I have been given.
You guys rock! :slight_smile:

I followed your advice with the FontAwesome icons. Super easy! :slight_smile:

However I think that it might be even better to put the icons to the left of the “menu-bars” up in the right corner. Is that doable without too much trouble?

I’m glad that my advice was helpful.

Sorry, but I don’t see any easy way to place the icons on the same “line” as the menu. If I come up with anything, I’ll let you know.

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