Font-Awesome Not Working Bundleconfig in MVC5

font-awesome not working bundleconfig in MVC5

Try using CssRewriteUrlTransform when bundling:

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

This changes any urls for assets from within the css file to absolute urls so the bundling doesn't mess up the relative path.

Docs for CssRewriteUrlTransform

bootstrap fontawesome icon is not working properly

I gave reference of fontawesome-all.min.css instead of fontawesome.min.css and it worked.

FontAwesome 4 LESS and Bootstrap 3 LESS bundling issue in ASP.Net MVC 5

[Solution] Changed the virtual path of the style bundle to use "~/Content/css" instead of "~/bundles/css" and the problem got fixed.

The bundle path "~/bundles/css" is supposed to be virtual and should not exist on the file system. It is used as a name and not as a path to a physical file. If this path exists on the file system, the bundle will not get loaded. I could see all the unicode characters were missing from the compiled bootstrp.css.

This is not mentioned in any documentation which is weird!

No Images when using font-awesome with MVC 5 website

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.

Font Awesome not working when deployed to Server 2008 R2

There's really not enough here to say for sure, but if I had to hazard a guess, I'd imagine you're including Font Awesome in a bundle, and the bundle path is breaking the font references.

The bundle path, i.e. ~/bundles/foo is a literal path. When the bundler joins and minifies everything it saves the file to that location. Style bundles typically use ~/Content/foo because of the tendency to reference things like images and fonts in ~/Content. Of course, bundling only happens in production, by default, so it won't affect you in development either way. I'm not sure what you're actually using as a bundle path, but that would be the first place I looked.

Another potential problem is that perhaps the bundle is not being loaded at all. This is common when you accidentally create a bundle path that maps to a physical directory. For example, if your bundle path is ~/Content/fonts, and you have a physical folder named fonts under ~/Content in your project, then your bundle will not be loaded and none of the scripts/css in that bundle would be applied to the page. Make sure your bundle path does not reference a physical directory.

ASP.NET MVC not loading FontAwesome correctly (blurry)

Fontawesome is just for the icons and not for the text. So in your example, only the cart is being generated by the FontAwesome font which looks fine to me.

The 'Checkout' text is generated by from the body, btn and btn-success classes. On their site FontAwesome has customized these from the base Bootstrap classes by modifying the bootstrap classes.

I'd recommend leaving the base bootstrap css file intact and creating your own css stylesheet and referencing it below the core bootstrap.css stylesheet which should override the bootstrap styles. I think you only need the body, btn and btn-success classes, so all you should need to add in the custom style sheet is :

UPDATE :

Note that the proxima-nova font is served via the Typekit webfonts service (https://typekit.com/fonts/proxima-nova).

  body {
    font-family: proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    }
        .btn-success {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
        background-color: #5bb75b;
        background-image: -moz-linear-gradient(top,#62c462,#51a351);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));
        background-image: -webkit-linear-gradient(top,#62c462,#51a351);
        background-image: -o-linear-gradient(top,#62c462,#51a351);
        background-image: linear-gradient(to bottom,#62c462,#51a351);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff51a351',GradientType=0);
        border-color: #51a351 #51a351 #387038;
        border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        }
    .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #bbb;
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    }

---

Related Topics