This WordPress theme came with the Jetpack plugin and uses Jetpack’s cute social-media menu feature – when you add links to your Twitter, Youtube, Github, etc. pages to the Social menu, they magically get turned in to pretty little icons which automatically match the site.
But if you add a service that isn’t supported by default, like Mixcloud, you get an ugly crummy generic link icon there instead. That’s no fun.
Those little icons are 24px-square SVG vectors and the image data is actually directly-present in the HTML source of the web page – they’re not PNG/GIF graphics being loaded as an addition request from the server.
Thankfully, a lovely Belgian called Jan has already written up how to solve this – his writeup presumes you’ve created a Child Theme, but luckily I already did that in my last post where I tweaked the colours in the theme I’m using.
To follow Jan’s guide, you will need the free Inkscape vector-graphics software and an understanding that SVG files are a type of XML document – which means you can edit them using a simple text editor. Even Notepad will do, although I used Visual Studio Code.
Both of the snippets of PHP code he provides need to go in the functions.php file of your current theme (creating a Child Theme if you’re using an “off the shelf” theme is probably a good idea, see my last post), changing the 'mastodon.social' => 'mastodon' etc. to suit the domain you want to match and the name you want to use for the icon.
You can copy+paste his sample SVG text in to a blank text file, copy-paste the <path> elements out of your logo SVGs (once you’ve sized them down nicely to 24px square and run them through his suggested optimiser tool) to replace the <path>s, change the symbol id to match the icon name you put in the PHP. Then just save that as something.svg and upload to the path described (you might need to create the assets/svg folders within your child theme).
Thanks Jan, that’s another little annoyance solved!