Jump to content

Font Awesome social icons disappeared

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://polarartist.no

Hello,

I have Font Awesome icons displayed throughout my site, but now they seem to have disappeared. I can still see them in the code, but they are not displayed correctly, and I'm not the best coder so I don't know how to fix this. Any help would be appreciated. I'm using the personal plan, so I do not have the header injection code, only on each page, but it has worked fine for months until now.

The code is supposed to be on any of the underlying gallery sides on https://www.polarartist.no/artister, for example https://www.polarartist.no/artist/aiming-for-enrike

The code I'm using:

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

<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 .fab,.fas {
    font-size: 28px;
    margin: 0 8px;
    color: black;
}
  .t-social .fa:hover {color: white;}
</style>


<ul class="t-social">
<li>
  <a href="https://www.facebook.com/aimingforenrike" target="_blank">
  <i class="fab fa-facebook-f"></i>
  </a>
</li>
<li>
  <a href="https://www.instagram.com/aimingforenrike/" target="_blank">
  <i class="fab fa-instagram"></i>
  </a>
</li>
<li>
  <a href="https://open.spotify.com/artist/78pR36HrjrFVIml89h1y4v?si=7ptyLM3XQf6p1-Sip4J2Og" target="_blank">
  <i class="fab fa-spotify"></i>
  </a>
</li>
<li>
  <a href="https://www.youtube.com/c/AimingForEnrike" target="_blank">
  <i class="fab fa-youtube"></i>
  </a>
</li>
<li>
  <a href="https://www.aimingforenrike.com/" target="_blank">
  <i class="fas fa-link"></i>
  </a>
</li>
</ul>
 

Skjermbilde 2022-10-07 kl. 11.13.12.png

Link to comment

If you're on the Personal plan then you shouldn't have access to the header code injection globally or on individual pages (this may be different if you're on an old plan but it looks like you're on a new website, 7.1). Code injection is available when you're on a trial, but would be disabled when you purchase the personal plan. I don't know of a way to use fontawesome without code injection, but there are alternatives if you just want social icons with links. https://icons8.com/icons works just fine.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • Solution
On 10/7/2022 at 10:16 AM, ngleke said:

I have Font Awesome icons displayed throughout my site, but now they seem to have disappeared. I can still see them in the code, but they are not displayed correctly

The icons are there - you just can't see them 🙂

This is because you have added inline CSS that sets the icon colour as white (on a white background) and overrides previous CSS that set the colour to black. 

Here is the offending CSS:

  .t-social .fab,.fas {
    font-size: 35px;
    margin: 0 8px;
    color: white;
} 

Note that CSS is applied in the order it appears, so if you use CSS to set black and then further down the page you use CSS to set white, the white will override the black.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Edited by paul2009
edited for clarity

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

My problem is that I have already set the color to black, as you can see in the code I have written above, but when viewing it live on the page it has turned white (it also is white and off-center in editing mode). When you inspect the code and turn the color black again you can also see that the icons are not centered as they should be and I don't know where the problem lays. 😐

I haven't done any changes to the code in the last months and it has worked perfectly fine until now, so I was also wondering if Squarespace has done any changes that might have affected the code.

Skjermbilde 2022-10-08 kl. 10.44.09.png

Link to comment

I was able to fix the social icons on the page by adding !important behind color and text-align. The problem was actually in the footer, where I also used somewhat the same code with white color and right align which overwrote the page code. I would not know how to fix this problem particularly, but luckily I am able to use the Squarespace social links widget in the footer so that they won't affect each other any more hopefully. 

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.