Jump to content

Social Link Custom Icon doesn't match the other social links icon

Go to solution Solved by Ziggy,

Recommended Posts

Hello!

I added a custom IMDb icon to my social links. There are a couple of issues and since I haven't found a solution I'm writing here:

 

1. The custom icon appears only on the footer, but not on the header.

2. How can I make the icon the same as the other icons style, size, colors and hover effects on footer and header?

3. On the about page there are custom colors added. so I need to change the color of the custom icon as well.

4. I need it for desktop and mobile view as well.

 

 

www.mvarbanova.com

Pass: purplebutterfly

 

 

Thank you!

Edited by kkf_magi
Link to comment

The classes for the social icons in the header are different from the social icon block, try this class:

.header-actions-action. header-actions-action--social

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
18 minutes ago, kkf_magi said:

Unfortunately the system says there is an error with this code

An error, how did you apply the class I shared?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Can you share the code you are using so I can write the CSS to apply your icon to the header on desktop and mobile?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy  Sure:

 

 

.sqs-svg-icon--list a:nth-of-type(1) {
  svg {      
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/6646f8c9636d2a1604eebf48/t/6666c0705f393a5f7ecef737/1718009968980/IMDB+Raspberry.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}

Link to comment
  • Solution

Add this to your previous code:

.header-actions-action--social .icon--fill[href="http://imdb.me/margarita.varbanova"], .header-menu-actions-action .icon[href="http://imdb.me/margarita.varbanova"] {
    svg {
      visibility:hidden;
    }    
    background-image: url('https://static1.squarespace.com/static/6646f8c9636d2a1604eebf48/t/6666c0705f393a5f7ecef737/1718009968980/IMDB+Raspberry.png') !important; 
    background-size: 60% !important;
    background-repeat: no-repeat !important;  
    background-position: center center !important;
  } 

You may want to use this revision of your code to improve the targeting:

.sqs-svg-icon--list a[href="http://imdb.me/margarita.varbanova"] {
  svg {      
    display:none;   
  }   
  background-image: url('https://static1.squarespace.com/static/6646f8c9636d2a1604eebf48/t/6666c0705f393a5f7ecef737/1718009968980/IMDB+Raspberry.png');   
  background-size: 100%;   
  background-repeat: no-repeat;   
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, kkf_magi said:

@Ziggy Thank you SO much!

Can you mark my post as the solution and give it a like?

1 hour ago, kkf_magi said:

Is there a way to add a hover effect

The hover effect changes the colour of the SVG to a pale pink, given that you are using an image, you can't simply change the hover in CSS, you would need a different image file uploaded that could replace the first one when hovering.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.