AdamSupra Posted April 8, 2020 Share Posted April 8, 2020 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. Link to comment
tuanphan Posted April 8, 2020 Share Posted April 8, 2020 Which icons? Or all icons on header? 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
AdamSupra Posted April 8, 2020 Author Share Posted April 8, 2020 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). Link to comment
tuanphan Posted April 19, 2020 Share Posted April 19, 2020 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
AdamSupra Posted April 26, 2020 Author Share Posted April 26, 2020 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
tuanphan Posted April 27, 2020 Share Posted April 27, 2020 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
AdamSupra Posted April 28, 2020 Author Share Posted April 28, 2020 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
maldrich Posted May 21, 2020 Share Posted May 21, 2020 How would you get this to apply to social icon blocks beyond just the header? Link to comment
tuanphan Posted May 25, 2020 Share Posted May 25, 2020 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
AdamSupra Posted May 26, 2020 Author Share Posted May 26, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.