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

Add Social Links to Multiple External Sources (In Addition to Own Social Links)


headersandvolleys

Question

Is there any way to add social links to external profiles, while keeping the social icons the same as the ones used for my personal profile?

I currently have my personal social links within the footer of each page, but would like to include links (with social icons) to other social profiles within the content.

Thanks in advance!

Bob

Link to comment

10 answers to this question

Recommended Posts

  • 1

I've done this by using FontAwesome for the icons and creating code blocks. This post explains how to add them to the nav bar, but the same general method would work in any code block: https://christyprice.com/squarespace-tips-tricks/how-to-add-social-media-icons-to-squarespace-navigation

You can see it in action (not in the nav bar) here: https://www.orinrice.com/about

Link to comment
  • 0
On 1/4/2020 at 4:03 AM, christyprice said:

I've done this by using FontAwesome for the icons and creating code blocks. This post explains how to add them to the nav bar, but the same general method would work in any code block: https://christyprice.com/squarespace-tips-tricks/how-to-add-social-media-icons-to-squarespace-navigation

You can see it in action (not in the nav bar) here: https://www.orinrice.com/about

Hi Christy, this was very useful, but I although I understand how to add the icon using the <i...> tag, I don't understand how to add the link to it if it is not meant to be in the header/menu.  I want to do it exactly like you did at https://www.orinrice.com/about, could you perhaps explain a little more what I need to do after step 2 in your tutorial? I added a code box, added the <i class="fab fa-instagram"></i>, but then I'm stuck.

Link to comment
  • 0
9 hours ago, MishaGo said:

Hi Christy, this was very useful, but I although I understand how to add the icon using the <i...> tag, I don't understand how to add the link to it if it is not meant to be in the header/menu.  I want to do it exactly like you did at https://www.orinrice.com/about, could you perhaps explain a little more what I need to do after step 2 in your tutorial? I added a code box, added the <i class="fab fa-instagram"></i>, but then I'm stuck.

Hi @MishaGo, you can check out the source code and pull from there. On that particular site I used two FontAwesome icons stacked. Here's that part of the code: 

<a href="https://www.linkedin.com/" target="_blank"><span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
</span></a>

You would replace the URL with yours. 

Link to comment
  • 0
On 1/24/2020 at 9:40 PM, christyprice said:

Hi @MishaGo, you can check out the source code and pull from there. On that particular site I used two FontAwesome icons stacked. Here's that part of the code: 


<a href="https://www.linkedin.com/" target="_blank"><span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
</span></a>

You would replace the URL with yours. 

Thank you so much, this was hugely useful.

Link to comment
  • 0
1 hour ago, RobMcCallum said:

Hello!

I am trying to create the below with two separate sets of social links on 7.1. I have tried to follow the instructions above but I can figure it out. could you please advise?

 

https://www.orinrice.com/about

 

thanks, Rob

I see email, linkedin icons worked here?

Link to comment
  • 0
On 9/29/2020 at 9:48 PM, netiro said:

Hi, I used the code above and it worked perfectly, but now the circles and alignment seem to have been thrown out?

Any ideas what to do? Would someone have a look and advise? Thanks in advance.

https://www.netiro.co.uk/our-team/tim-gear-evans

Can you paste all code you inserted? We can check easier.

Link to comment
  • 0
3 hours ago, tuanphan said:

Can you paste all code you inserted? We can check easier.

<a href="https://www.linkedin.com/in/tim-gear-evans-6a5580/" target="_blank"><span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-linkedin-in fa-stack-1x fa-inverse">
  </i>
 
</span></a>

<a href="mailto:tim.gear-evans@netiro.co.uk" target="_blank"><span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab far fa-envelope fa-stack-1x fa-inverse"></i>
</span></a>

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...