CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrapasp.net-mvc-4razorfont-awesome
iggyweb
iggyweb

Reputation: 2483

MVC 4 Bootstrap - Icon Issue

I have an issue where icons are not displaying when publishing remotely. If I run the project within Visual Studio 2010 via http://localhost:62299/ I see everything perfectly in Firefox, but if I use the same browser to view the remote website, the icons do not show. Getting varied results across verions of IE too.

I have ensured the full /Contents and /Scripts folders have been copied across in their entirety to ensure no files have been omitted. But despite this, icons will still not show.

BundleConfig.cs

using System.Web.Optimization;

namespace WebApplication1
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.IgnoreList.Clear();

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryold").Include(
                        "~/Scripts/Compatibility/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryuiold").Include(
                        "~/Scripts/Compatibility/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/ie9").Include(
                        "~/Scripts/html5shiv.js",
                        "~/Scripts/respond.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap*"));

            bundles.Add(new ScriptBundle("~/bundles/freelanceold").Include(
                        "~/Scripts/jquery.easing.min.js",
                        "~/Scripts/classie.js",
                        "~/Scripts/freelancer.js"));

            bundles.Add(new ScriptBundle("~/bundles/freelance").Include(
                        "~/Scripts/jquery.easing.min.js",
                        "~/Scripts/classie.js",
                        "~/Scripts/cbpAnimatedHeader.js",
                        "~/Scripts/freelancer.js"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.min.css",
                        "~/Content/Site.css"));

            bundles.Add(new StyleBundle("~/Content/font-awesome").Include(
                        "~/Content/font-awesome/css/font-awesome.min.css"));
        }
    }
}

_layout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <title>@ViewBag.Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/font-awesome")
        @Scripts.Render("~/bundles/modernizr")
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400' rel='stylesheet' type='text/css' />
        <link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css' />
    </head>

    <body id="page-top">
        @RenderSection("featured", required: false)
        @RenderBody()
        <footer class="text-center">
            <div class="footer-below">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            Copyright &copy; 2014 - MySite
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <div class="scroll-top page-scroll visible-xs visble-sm">
            <a class="btn btn-primary" href="#page-top">
                <i class="fa fa-chevron-up"></i>
            </a>
        </div>

        <!--[if lt IE 9]>
        @Scripts.Render("~/bundles/jqueryold")
        <![endif]-->
        <!--[if gte IE 9]><!-->
        @Scripts.Render("~/bundles/jquery")
        <!--<![endif]-->
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/freelance")

        <!-- IE8 support for HTML5 elements and media queries -->
        <!--[if lt IE 9 !IE]>
            @Scripts.Render("~/bundles/ie9")
        <![endif]-->    

        @RenderSection("scripts", required: false)
    </body>
</html>

Any help would be be much appreciated :-)

Upvotes: 0

Views: 2319

Answers (3)

prasanth shenoy
prasanth shenoy

Reputation: 235

I had a similar issue with font awesome below listed is my current bundle value and this solved the issue with additional references from Font-awesome.css file

bundles.Add(new StyleBundle("~/Framework/libs/vendor/font-awesome/4.4.0/css/font-awesome").Include( "~/Framework/libs/vendor/font-awesome/4.4.0/css/font-awesome.css"));

when the path is relative the to the actual font-awesome css file the relative path to the eot,tff and woff files will also become correct.

Upvotes: 0

Kevin Heidt
Kevin Heidt

Reputation: 1155

I had this same issue with a set of css files, where the request to the combined style url would result in a 301, then the final destination resulted in a 403 (forbidden). It's because your style bundle url of "~/Content/font-awesome" matches an actual folder path. I think the virtual path resolution is matching it to an actual physical folder location first, and if that fails, then it matches to a virtual bundle url if possible. If you change it to what I have below and update your view to match, you should be fine:

bundles.Add(new StyleBundle("~/Content/font-awesome-bundle").Include(
                        "~/Content/font-awesome/css/font-awesome.min.css"));

@Styles.Render("~/Content/font-awesome-bundle")

Upvotes: 2

krillgar
krillgar

Reputation: 12805

I had this same issue with a project at work. What is happening is that some of the font-awesome files weren't included in the publish.

The .eot, .tff, and .woff were not included for me. I had to click on the files, and change the Build Action from "None" to "Content". At that point, they would output correctly.

For the record, that was in Visual Studio 2010, but in 2013, it appears that they are set to "Content" correctly.

Upvotes: 0

Related Questions