Jump to content

Custom Social Icon code

Recommended Posts

  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Add to Home > Design > Custom CSS

/* remove current icon */
.header-actions-action--social a:last-child svg {
    display: none;
}
/* set new icon */
.header-actions-action--social a:last-child {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/brine-demo-squarespace-com-1689x1080-500w.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/19/2020 at 6:12 AM, tuanphan said:

Add to Home > Design > Custom CSS


/* remove current icon */
.header-actions-action--social a:last-child svg {
    display: none;
}
/* set new icon */
.header-actions-action--social a:last-child {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/brine-demo-squarespace-com-1689x1080-500w.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

 

Ok, so my SVG file location would not show up, so I made a PNG instead.  but it doesn't exactly line up.  Also it doesn't have the rules of the others for color and hover.  How would that be fixed?

Link to comment
10 hours ago, AdamSupra said:

Ok, so my SVG file location would not show up, so I made a PNG instead.  but it doesn't exactly line up.  Also it doesn't have the rules of the others for color and hover.  How would that be fixed?

Edit this

.header-actions-action--social a:last-child {
    background-image: url(https://images.squarespace-cdn.com/content/5e48bac3e8cf6318cdae0fb7/1587937030449-1N9K5HNJE54RLMXUIS2T/lock-logo-test.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
16 hours ago, tuanphan said:

Edit this


.header-actions-action--social a:last-child {
    background-image: url(https://images.squarespace-cdn.com/content/5e48bac3e8cf6318cdae0fb7/1587937030449-1N9K5HNJE54RLMXUIS2T/lock-logo-test.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

You've been super helpful so far.  Thank you!! 

Still doesn't have the proper color or hover properties but I'll figure that out with some code in time.
 

Is there a way to also apply this to the footer or social blocks elsewhere on the site??

Link to comment
  • 4 weeks later...
On 4/28/2020 at 8:34 AM, AdamSupra said:

You've been super helpful so far.  Thank you!! 

Still doesn't have the proper color or hover properties but I'll figure that out with some code in time.
 

Is there a way to also apply this to the footer or social blocks elsewhere on the site??

missing your comment. Have you solved it yet?

On 5/21/2020 at 9:37 PM, maldrich said:

How would you get this to apply to social icon blocks beyond just the header? 

Can you share link to page where you use social icons blocks? I don't remember css name, need site url to check

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
23 hours ago, tuanphan said:

missing your comment. Have you solved it yet?

Can you share link to page where you use social icons blocks? I don't remember css name, need site url to check

I have not solved yet how to get the color and hover the same.... nor how to apply to the footer and social blocks elsewhere on the site as well.

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.