Custom Social Icon code

Site URL: https://www.adamhyattphotography.com

Trying to add a custom icon to a social link on my site.  I have the .svg vector file.  Need to know the CSS code to use, as I don't see any other way on the site or on the forums so far.

Which icons? Or all icons on header?

56 minutes ago, tuanphan said:

Which icons? Or all icons on header?

Just the last one in the header (although I have that social icon block other places including the footer and on about and contact pages).

Any Ideas?

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;
}

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?

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;
}

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

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

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

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.