Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
crc2pdx

How do I add social icons to my main navigation?

Question

7 answers to this question

Recommended Posts

  • 6

Step 1. Select an icon and find the icon code from here:

http://fortawesome.github.io/Font-Awesome/icons/

Step 2. Add a Link to your navigation and make the Link Title the icon code.

As an EXAMPLE, paste in

<i class="fa-facebook"></i>

as your Link Title for that Facebook icon.

Then, add your social profile URL to the 'External' tab of the link settings.

Step 3. Add this exact code to your site's Home menu > Settings > Advanced > Code Injection > Header and Footer fields.

HEADER:


<!----Font.awesome--->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


FOOTER:


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Step 4. Your new social icon should appear via the link in your site's navigation menu.

Edited by crc2pdx

Share this post


Link to post
  • 2

Hi guys,

I was having problems with this, but then found that replacing the header code (found here https://fontawesome.com/get-started) works well:

<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

You will also need to remove the footer code mentioned above.

Share this post


Link to post
  • 0

Great solve here my man.

To all youz:

His/her text for social icon is off. Use this on your first text in the link section:

Also. If you want the social links to be a different color, add style=" " into the link section. It would look like this: \

thanks again.

Share this post


Link to post
  • 0

@markdekoning

To Make Larger Icons

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes. (You will make this change in the Link Title)

fa-lg fa-2x fa-3x fa-4x fa-5x

If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Share this post


Link to post
  • 0
On 5/9/2016 at 3:15 PM, crc2pdx said:

 

Hi,

For some reason this isn't working for me. I get a generic scrambled unknown icon in place of the social icons. I have used your exact HTML and header/footer code injections and this is what I see. Help?

TIA!

Screen Shot 2020-02-13 at 10.43.06 AM.png

Share this post


Link to post
  • 0
On 2/14/2020 at 1:43 AM, emalu said:

Hi,

For some reason this isn't working for me. I get a generic scrambled unknown icon in place of the social icons. I have used your exact HTML and header/footer code injections and this is what I see. Help?

TIA!

Screen Shot 2020-02-13 at 10.43.06 AM.png

Try this guide: https://forum.squarespace.com/topic/157427-share-add-social-icons-to-navigation/


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...