CODEWITHSUNDEEP
csstwitter-bootstrapasp.net-mvc-5font-awesome
Michael
Michael

Reputation: 79

No Images when using font-awesome with MVC 5 website

When adding font-awesome to the style bundle, images do not display correctly. In stead of the right icon, I get a transparent box. My style bundle is setup like:

 bundles.Add(new StyleBundle("~/Content/css").Include(
              //site bundles
 ).Include("~/Content/font-awesome/css/font-awesome.css", new CssRewriteUrlTransform()));

I checked a couple of threads on the site, but none seem to tackle this issue. As always, I appreciate any help regarding this.

Mike

Upvotes: 1

Views: 624

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38757

Assuming within the Content folder you have a folder called fonts that contains the font-awesome font files, the issue would likely come down to the file path to the font files (WOFF,WOFF2,SVG,EOT,etc) references within the font-awesome css file. Likely the "src" property of the @font-face rules is using a relative url such as "../fonts/blah.woff". Try using removing the ".." and just have the url as "/fonts/blah.woff" with the 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 that works.

Upvotes: 1

Related Questions