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

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

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

Share this post


Link to post

5 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

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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. 

Share this post


Link to post
  • 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.

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...