Customise built-in social icon

Lumaral · April 13, 2021

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!

BrillWebsites · April 13, 2021

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

Lumaral · April 13, 2021

Thank you! It worked wonders

Customise built-in social icon

Recommended Posts

Lumaral

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

BrillWebsites

BrillWebsites

Link to comment

Lumaral

Link to comment

Create an account or sign in to comment

News

BrillWebsites

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources