Jump to content

Multiple Social Media Profile Icons

Recommended Posts

  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Add a Code Block on each profile >> Paste this code

<ul class="t-social">
<li>
  <a href="https://linkedin.com/">
  <i class="fab fa-linkedin-in"></i>
  </a>
</li>
</ul>
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social li i {
    font-size: 30px;
    margin: 0 20px;
}
</style>

And add this to Page Header or Code Injection Header

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 12/12/2022 at 5:16 PM, Olafdsds said:

Hello. That is exactly what I was searching for. can you give me a code for my website?

https://owl-maroon-36p3.squarespace.com/

 

That is same code for all websites. You can use above

If you need to add other icons, let me know which icons, we can adjust the code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Hi,

 

I'm having this problem. I'm a newbie. So in the interest of being fully clear.

 

I would like individual Linkedin links using the standard Icon that Squarespace supplies. I understand that it needs to be in the code block. But when I paste in what you've shown nothing appears. 

What I'd like to do: Have the linkedIn Icon under different members of my team and each icon to be linked to individuals profiles on linkedIn.

Also you haven't mentioned the individual url for the profiles and where in the code I can change this.

I'd appreciate if you can help as I can't seem to find a solution.

Please and thankyou!

Edited by ChaosAli
Link to comment
On 1/7/2024 at 5:07 AM, ChaosAli said:

Hi,

 

I'm having this problem. I'm a newbie. So in the interest of being fully clear.

 

I would like individual Linkedin links using the standard Icon that Squarespace supplies. I understand that it needs to be in the code block. But when I paste in what you've shown nothing appears. 

What I'd like to do: Have the linkedIn Icon under different members of my team and each icon to be linked to individuals profiles on linkedIn.

Also you haven't mentioned the individual url for the profiles and where in the code I can change this.

I'd appreciate if you can help as I can't seem to find a solution.

Please and thankyou!

Can you share link to page where you use Code Block? We can check problem easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

I'm having a similar issue. I'm building a website for a childrens book author. They have a main Twitter account under their name. But then they have multiple Twitter accounts for their different book series. Ideally, I'd like to have their main Twitter account and Instagram account in the header and footer with just the book series Twitter accounts in the footer in a different section from the main ones (and somehow labeled to show the account names instead of just the Twitter icon). 

Any help is appreciated! I did try a suggestion above, but I wasn't sure how to add the second section of code into the header (or what a Code Injection Header is!). 

https://star-hexaflexagon-9h32.squarespace.com/

Link to comment
On 1/20/2024 at 11:37 PM, jtyost said:

I'm having a similar issue. I'm building a website for a childrens book author. They have a main Twitter account under their name. But then they have multiple Twitter accounts for their different book series. Ideally, I'd like to have their main Twitter account and Instagram account in the header and footer with just the book series Twitter accounts in the footer in a different section from the main ones (and somehow labeled to show the account names instead of just the Twitter icon). 

Any help is appreciated! I did try a suggestion above, but I wasn't sure how to add the second section of code into the header (or what a Code Injection Header is!). 

https://star-hexaflexagon-9h32.squarespace.com/

The site is private. You can setup an access password, we can check easier

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.