Add costomized icons in social icon block?

Hi @hbhandlar – you could probably add some custom CSS for that. Could you provide a link to your site so I can take a look directly and give you a hand? As well, could you upload the graphic you want to replace the link with to your media library and provide the URL here?

Thanks! The site is https://www.triturusgames.com. And the link to the image I want instead of the grey link icon (a link to Bardgamegeek) is https://triturusgames.com/wp-content/uploads/2023/02/bgg-logga.png.

@hbhandlar Give this a try and let me know how it goes!

/* Social Links - Boardgamegeek.com */
.wp-social-link a[href*="boardgamegeek.com"] {
  background: url('https://triturusgames.com/wp-content/uploads/2023/02/bgg-logga.png') no-repeat center center;
  background-size: contain;
}
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor[href*="boardgamegeek.com"] svg {
  fill: transparent;
}
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link.wp-social-link-chain {
  background-color: transparent;
}

While the Customizer is not exposed by default when using Site Editing, you can still access it manually by adding /wp-admin/customize.php after your URL. You can then add custom CSS in the Additional CSS area.

I added all the code above in th ecustomize.php view. But then, I think I have to add something for the object also, under “block, advanced, “ytterligare CCS-.klasser” in swedish. What should I add there? I have tried parts of the code above but it does not work.

Hi @hbhandlar –

But then, I think I have to add something for the object also, under “block, advanced, “ytterligare CCS-.klasser” in swedish.

No, the CSS should work without needing to add any additional CSS classes. ??

I have tried parts of the code above but it does not work.

The reason it’s not working is that in copying over the CSS I provided, some of the quote marks have gotten mangled. If I look at the CSS on your site, it reads:

/* Social Links - Boardgamegeek.com */
.wp-social-link a[href*="boardgamegeek.com"] {
  background: url('https://triturusgames.com/wp-content/uploads/2023/02/bgg-logga.png') no-repeat center center;
  background-size: contain;
}
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor[href*="boardgamegeek.com"] svg {
  fill: transparent;
}
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link.wp-social-link-chain {
  background-color: transparent;
}

Please change the two instances of [ to [ in your CSS editor.

Here’s what it looks like when I make the two fixes in the browser inspetor:

Let me know how it goes!

Hmm, I see that the forum editor has corrected the mangled code I copied so you won’t be able to see the problem above!

What you need to fix in your CSS is these two bits I’ve underlined in red:

Let me know if this is clear!