Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Daniel Mears
Daniel Mears
16,859 Points

SVG images - not being interpreted properly by the browser/server?

Hello all,

I'm trying to use an SVG image to overlay other images (just usual jpegs) with a semi-transparent play symbol. I had the design including the SVG working locally, but now that the site has been migrated online the SVGs aren't working. (I've been loosely following the 'how to build a word press theme' course).

I downloaded the SVG in question from icomoon and I've checked the path is working correctly.

Chrome shows a broken image symbol while the dev tools status is '404 not found' and type lists 'text/html'.

This is the url of the page in question: http://www.thirdlegstudios.com/

Does anyone have any ideas?

Thanks a lot in advance,

Daniel

PS I hope this is the right topic, I feel that I've seen treehouse videos which mentioned SVGs before but I can't seem to find them at the moment/SVG images probably wasn't the main topic of the video.

1 Answer

Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

That's strange. Have you double checked the path? Please post a screenie of your directory.

How are you loading the fonts and css?

You should be using wp_enqueue_style() to link your stylesheets and font styles. 

function theme_styles () {

wp_enqueque_style('ico-moon-fonts', get_template_directory_uri() . /fonts/iconmoon.woff);

}

add_action('wp_enqueue_scripts', 'theme_styles');