Jump to content

Customise built-in social icon

Recommended Posts

Posted

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

Hi! I just added a link to a hidden contact form page in the header's social links section.

Currently it displays as a generic link and I'd like it to display an envelope icon instead. Is there a way to change the link icon to the envelope that shows when writing an email?

If not, I have these two in case I need to add a custom img url: PNG - SVG

Thank you!

  • Replies 2
  • Views 594
  • Created
  • Last Reply
Posted

Something like this would work in custom CSS.

.header-actions a[href="https://www.lumaral.com/contact"] svg{
    display: none;
}
.header-actions a[href="https://www.lumaral.com/contact"]::after{
    content:'';
    background-image: url('https://image.flaticon.com/icons/png/128/2089/2089181.png');
    background-size: cover;
    width: 18px;
    height: 18px;
    display: block;
}

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.