Social Media Icons Not Displaying

Hi there,

I created a website here: http://www.mattmcardle.co.uk

Right down the bottom, I used a couple of the built-in social media icons to link to Facebook and Instagram. However, these are showing on the live site as broken links, even though locally and via a local MAMP server they are displaying correctly.

I can see from the code that they are SVGs rather than PNGs of GIFs, which I assume is the problem. Is this an issue server-side that I should alert my web host to?

Any help welcome!

MAtt

@Lordgytrash, Sorry to hear this. I haven’t had the issue so I went and checked your site’s code…

I’m thinking that it looks like the svg files got corrupted along the way so could you remove them temporarily and re-publish and once done bring them back onto the canvas and re-publish again and see if that fixes the issue…

Hi @Lordgytrash,

a quick check of the server headers for http://www.mattmcardle.co.uk/images/fb.svg suggests your server is returning text/plain for SVGs. I’m assuming this is what is making browsers throw a fit.

Server headers also suggest the server is apache, so if you don’t control the server you can create a file name .htaccess in the root of your site and place the following in it:

<IfModule mod_mime.c>
    AddType image/svg+xml                    .svg
    AddType application/font-woff            .woff
    AddType application/font-woff2           .woff2
</IfModule>

This also adds the webfont types which are likely to be missing if the svg is missing.

If you already have a .htaccess file in the root of your site, you can add the lines above to the bottom of that.

3 Likes

@duncan, Well caught… I was struggling on this one and could not make sense of it!

Hi Duncan,
Thanks for this fix. It worked and now the icons are displaying correctly! A useful snippet to know for future reference.

MAtt :slightly_smiling_face:

Hopefully we can solve it once and for all in Sparkle, but it’s a bit tricky to do correctly.