Add costomized icons in social icon block?

  • hbhandlar

    (@hbhandlar)


    1 year, 2 months ago

    I have a social icons block with icons for facebook and a few more. Now I want to add an icon that cant be chosen in the editor. I can choose “link” and gets a gray circle. How do I either change this icon image to a coustomized one of my own suiting this link, or how do I add an completely new customized icon into this block?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Kathryn Presner

    (@zoonini)

    1 year, 2 months ago

    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?

    Thread Starter hbhandlar

    (@hbhandlar)

    1 year, 2 months ago

    Thanks! The site is http://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.

    Moderator Kathryn Presner

    (@zoonini)

    1 year, 2 months ago

    @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.

    Thread Starter hbhandlar

    (@hbhandlar)

    1 year, 2 months ago

    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.

    Moderator Kathryn Presner

    (@zoonini)

    1 year, 2 months ago

    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!

    Moderator Kathryn Presner

    (@zoonini)

    1 year, 2 months ago

    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Add costomized icons in social icon block?’ is closed to new replies.