Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
jasonlj

Add missing social icon/logo (Discord)

Question

Site URL: http://www.2ndd.ltd

Hey, I have a bar of social links w/ icons on my squarespace site. By default, Squarespace doesn't recognize my Discord.gg link, so it uses the default "chain" social media icon for that link. How do I add the Discord icon myself? I have it as both svg and png, would prefer svg, but I'll take anything right now, really.

 

Thanks!

Capture.PNG

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

Well, I couldn't find a great way to do it. But here's a terrible way to do it.

Replace 'discord icon index here' with the index of your discord link w/in your social links. My icon is the second of two icons, so I would put 2 there

The 'link to svg here' bit needs to be replaced by the link to the svg. You could do this with a png too. You can host svgs on your site by creating a new unlinked page,and uploading the svg file there. I'm pretty sure you can use the /s/whatever slug but I'm not sure. If you can't, just do www.yoursite.com/s/whatever, then copy the url your broser changes it to.

A more robust way to do this would dynamically determine where the discord link is w/in your social links, but I'm bad at css so here's this if anyone needs it.

.icon:nth-child( discord icon index here ) {
  svg-color: transparent;
  background-repeat: no-repeat;
  background-image: url('http:// link to the svg here');
  width: 100%;  height: auto;
}

.icon:nth-child( discord icon index here ) svg {
	visibility: hidden;
}

Share this post


Link to post
  • 0

also, to get it everywhere else, you can use

.sqs-svg-icon--wrapper:nth-child( icon index here ) {
  background-repeat: no-repeat;
  background-image: url('you are ell');
  width: 100%;  height: auto;
}

.sqs-svg-icon--wrapper:nth-child( icon index here ) svg {
	visibility: hidden;
}

.header-menu-actions-action:nth-child( icon index here ) {
  background-repeat: no-repeat;
  background-image: url('you are ell');
}

.header-menu-actions-action:nth-child( icon index here ) svg {
	visibility: hidden;
}

 

Share this post


Link to post
  • 0

Jason,

This works well to hide a social icon, but in my case it does not work for replacing it with a new icon (a .svg file I include with the URL method). Do you know why could this be?

Thanks!

Pedro

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...