css - No Images when using font-awesome with MVC 5 website -

when adding font-awesome style bundle, images not display correctly. in stead of right icon, transparent box. style bundle setup like:

 bundles.add(new stylebundle("~/content/css").include(               //site bundles  ).include("~/content/font-awesome/css/font-awesome.css", new cssrewriteurltransform())); 

i checked couple of threads on site, none seem tackle issue. always, appreciate regarding this.

mike

assuming within content folder have folder called fonts contains font-awesome font files, issue come down file path font files (woff,woff2,svg,eot,etc) references within font-awesome css file. "src" property of @font-face rules using relative url such "../fonts/blah.woff". try using removing ".." , have url "/fonts/blah.woff" css.

from:

    @font-face {         font-family: 'fontawesome';         src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');         src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');         font-weight: normal;         font-style: normal; } 

to:

@font-face {         font-family: 'fontawesome';         src: url('/fonts/fontawesome-webfont.eot?v=4.3.0');         src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');         font-weight: normal;         font-style: normal; } 

let me know if works.