Jump to content

Insert Telegram icon in social block on light and dark background

Go to solution Solved by tuanphan,

Recommended Posts

On 9/1/2022 at 3:59 AM, PaolaAV said:

Yes.

I don't have Telegram image so I use a random Pixabay image. You can replace new image later

Add to Design > Custom CSS

/* replace generic icon */
footer.sections a.url[href*="t.me"] svg {
    opacity: 0;
}
footer.sections a.url[href*="t.me"] div {
    background-image: url(https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377__480.jpg);
    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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you @tuanphan

It is ok for the Telegram link in the footer, however it did not change in the link block in the contact page.
I tried this and it worked:

/* replace generic icon page contact block link */
.sqs-block-content a.url[href*="t.me"] svg {
    opacity: 0;
}
.sqs-block-content a.url[href*="t.me"] div {
    background-image: url(https://static1.squarespace.com/static/62d2e3cc6a30d432a86e9a5a/t/630dc32c630db914d4ebfe38/1661846316659/telegramB.png); 
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
}

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.