Различные стили шрифта с бутстрапом Glyphicons on Azure

Question

Я создал веб-приложение с использованием ASP.NET MVC 5, Bootstrap 3.3.6 и Glyphicons, установленных из Nuget. У меня проблема с стилем шрифта навигационных ссылок, только с добавленными Glyphicons. Проблема возникает на Azure. Чтобы быть ясным, отображаются глификоны. На azure они больше, а следующие имена используют разные шрифты, что неверно. Есть идеи..?

У меня была такая же проблема с стилем на локальном хосте, но я исправил его, используя код ниже. Добавлено .glyphicon: before {} раздел и изменен на .glyphicon {font-family: inherit;} из 'Glyphicons Halflings'.

bootstrap.css

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('../fonts/glyphicons-halflings-regular.eot'); 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
    url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
    url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
    url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
} 
.glyphicon { 
    position: relative; 
    top: 0px; 
    display: inline-block; 
    font-family: inherit; 
    font-size: inherit; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 

    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.glyphicon:before{ 
    font-family: 'Glyphicons Halflings' !important; 
    font-size: x-small; 
} 

Я понятия не имею, почему он не работает на Azure.

Остальной мой код:

_Layout.cshtml

@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/jqueryui") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/jqueryui") 

<div class="navbar-header"> 
    <a class="navbar-brand" style="padding-top:14px;font-family:Arial, Helvetica, sans-serif" href="/Home/Index"> 
     <span class="glyphicon glyphicon-home" style="font-size:14px"> Home Page</span></a> 
</div> 
<div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li>@Html.ActionLink(" Offers", "All", "Offers", null, new { @class = "glyphicon glyphicon-road " })</li> 
     <li>@Html.ActionLink("About", "About", "Home")</li> 
     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>     
    </ul> 
</div> 

BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles) 
    { 
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js")); 

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

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

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

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

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

     bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
        "~/Content/themes/base/all.css", 
        "~/Content/themes/base/base.css", 
        "~/Content/themes/base/theme.css")); 
    } 

Web.config

</system.webServer> 
    <staticContent> 
    <remove fileExtension=".eot" /> 
    <remove fileExtension=".ttf" /> 
    <remove fileExtension=".svg" /> 
    <remove fileExtension=".woff" /> 
    <remove fileExtension=".woff2" /> 
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> 
    <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" /> 
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> 
    <mimeMap fileExtension="woff" mimeType="application/font-woff" /> 
    <mimeMap fileExtension="woff2" mimeType="application/font-woff2" /> 
    </staticContent> 
</system.webServer> 

Это, как "Предложения" навигационные ссылки loo кс, как при проверке в IE:.

1. on Azure

2. on localhost

Glyphicons расположены в Главная папка/шрифтов/glyphicons-халфлингами-регулярных (СРВ, SVG, TTF, Уофф, woff2)

Все самозагрузки CSS' расположены в Главная папка/Content/загрузчике *. (CSS, карта)

Answer 1

Ваша проблема связывает.

Когда вы запускаете локально в режиме отладки, файлы .css отправляются индивидуально в браузер. Если не в режиме отладки (при развертывании), файлы .min.css объединяются в один файл и отправляются. Если нет файла .min.css, он становится миниатюрным на лету.

Другими словами, ваши изменения не указаны в bootstrap.min.css, поэтому ваши изменения не будут отображаться в развернутом приложении. Minify bootstrap.css (есть много онлайн-инструментов) и замените содержимое bootstrap.min.css. Или еще лучше оставить загрузочные файлы в одиночку (так что обновление bootsrap до более новых версий не будет сложно) и переопределить все, что вам нужно, в отдельный файл css, который загружается последним в комплекте.