Help Centre

Support > Designing and Building Your Website > Designing Your Website

How To Add Social Icons To Your Website Header and Footer

If you use Social Media and would like to link your profiles to your website there are some easy ways that you can do this. The most popular method is to show your social icons in the areas of your website which stay constant across the site - the header and the footer.

You can choose to add the social icons to just the header, just the footer or both. You can even customise different icons for different areas - it’s totally flexible to your needs.

There are a range of social icons available including the popular ones for Facebook, Instagram, Twitter, Pinterest and Tiktok, plus specific icons for profiles like Linkedin, Github, Soundcloud. There’s lots to choose from.

If you want to get creative you could consider changing the icons for other reasons like to have an email icon which links to your contact form. You don’t have to stick to using the section for Social Media links as this can be considered for anything you’d like to have an icon (or icons) for and a link.

To get started you’ll need to go into the Design area to edit your header or footer using the following steps:

1. Log into your Create account

2. Click Design from the top-menu

3. Click Edit Header or Edit Footer from the left-hand menu

Editing Your Header and Footer
The following steps are shown whilst editing your header but they outline the options to look for when editing the footer as the settings panels are the same.

If you’ve chosen a header or footer which doesn’t have the social icons displayed you can toggle them on along with a number of other options by following the below steps:

1. Hover your mouse in the header or footer area to reveal the Settings menu on the right hand side.

2. Click on the Settings icon and the panel of options will appear


Selecting Your Header Settings
3. Click on Content to go to the correct area

4. Toggle ON the Social icons and click Done

You should see the icons appear on the header or footer for you to edit.

Choosing What Content Appears On Your Menu
You’ll now be able to edit the icons to suit your needs, there will be some defaults there which contain examples of how you should put the links in. You’ll also be able to add or delete icons as required.

To begin editing the icons hover your mouse over them for the List Settings menu to appear.

Please Note. If you see a message stating you need to go to the 'Site Header/Footer in your Content area" this means that you are using one of our older header or footer layouts. You will need to move to the latest version by choosing a new header or footer from the left panel. The latest version has more design options than before and offers very similar designs if you’d prefer to keep things the same.

Now you’re ready to begin setting up the social icons, follow the steps below to customise them to your needs.

1. Click the List Settings icon to access your social icons.

Editing Your Social Icons List
2. You’ll now see a full list of the icons as they are currently set up. From here you can add more icons, delete ones you don’t need and adjust the existing ones. To configure a social profile begin by clicking the Change Icon option with the arrows.

Changing The Icon For Your Social Media Icons
3. On the Icon Selection panel you can choose from a range of categories to browse icons or use a search term to discover the icon you would like to use. If you are searching we recommend selecting All from the category drop down first so you will see all the icons available for the search term.

In our example below we have searched for Pinterest and you can see there are a number of icons with different styles to choose from.

4. Click on the icon you’d like to use to select it. Once selected it will have a slightly darker border.

5. Click the Done button to save your choice.

Choosing Which Icon To Use
Once you’ve set up the icon you’ll want to add the link to your Social Media profile.

1. To configure the link click on the Item List option with the chain.

How To Edit The Link For Your Social Media Icon
If you’ve built links before in other areas of Create you’ll be familiar with this panel already. From here you can set up links to other pages of your website, files, and links to other sites.

2. Click on Website to go to the panel for setting up links to other websites.

3. Enter the website address in the Featured URL box for your social media profile. In our example below you’ll see we have put in our Facebook page URL.

4. Add some descriptive text for the link in the Link Text Attribute box. This text helps screen readers understand your site and is informative for search engines.

5. Set the Toggle ON for the option Open In New Tab. This is a useful setting as this means your visitor will open your social profile in a new window of their internet browser and they’ll still have your website open too.

6. Click the Confirm button to save your choice.

How To Edit The Link For Your Social Media Icon
Click the Done button when you are finished editing your social icons and don’t forget to publish your changes when you are ready for them to go live on your public website. 

More Questions?

If you have any further questions, please get in touch and we will be happy to help.

Get in Touch