Почему шрифт-awesome работает на localhost, но не в Интернете?

Я использую шрифт awesome в моем проекте (mvc/asp.net). Моя проблема заключается в том, что я отлаживал проект и проверял localhost, проблем с шрифтами не было. Но когда вы публиковали веб-сайт и просматривали веб-страницы, вместо значков я видел маленькие коробки. Я уверен, что он помещен в правильный каталог (где размещены css файлы).

Я не нашел подходящего решения.

Кстати, проблемы с кнопками тоже нет. Они все в порядке, но значки исчезли.

Спасибо

Ответы

Ответ 1

Я только что загрузил вашу веб-страницу и проверил вкладку net firegug.

ваши следующие URL-адреса возвратили 404:

http://www.senocakonline.com/Content/font/fontawesome-webfont.woff

http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf

Я бы предположил, что те, которые отсутствуют, являются причиной того, что ваши значки не отображаются.

ОБНОВЛЕНИЕ: 23.10.2015 чтобы сделать его доступным, просто добавьте этот код в свой WebConfig:

<system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Ответ 2

Почему шрифт-awesome работает в режиме отладки, но не в IIS?

В Visual Studio по умолчанию некоторые файлы шрифтов не входят во время публикации:

  • .eot
  • .json
  • .ttf
  • .woff

Это связано с тем, что для их действия для сборки установлено значение Нет, это по умолчанию (в MVC, не уверен в WebForms). Вы должны перейти к поврежденным свойствам файла и установить его из "Нет" в "Содержимое".

enter image description here

Вот как я это решил (не вручную перетаскивая файлы, как могут предположить некоторые)

Кредиты идут к этому парню: http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html

Ответ 3

Другое решение, которое разрешило эту проблему для меня, можно найти здесь: fooobar.com/questions/46324/...

Цитата оттуда:

Вероятно, проблема в том, что значки/изображения в файлах css используют относительные пути, поэтому, если ваш пакет не живет в том же относительном пути приложения, что и ваши разделенные файлы css, они становятся неработающими ссылками.

Проще всего сделать, чтобы ваш пучок пакетов выглядел как каталог css, поэтому относительные URL-адреса просто работают, то есть:

new StyleBundle("~/Static/Css/bootstrap/bundle")

Мы добавили поддержку этого в релиз 1.1beta1, поэтому для автоматической перезаписи URL-адресов изображений вы можете добавить новую ItemTransform, которая автоматически перезагружается.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

Ответ 4

У меня была та же проблема. Решение:

  • Откройте файл CSS и удалите текущий раздел "font-face" и замените их:

    @font-face {

    font-family: FontAwesome;
    src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */
         url('/Content/fonts/fontawesomewebfont.svg'),
         url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */
    font-weight: normal;
    font-style: normal;
}

    (измените значения шрифта, как вы хотите)

  • Скопируйте файл шрифта ttf на рабочий стол, затем преобразуйте его в eot

      

    http://www.kirsle.net/wizards/ttf2eot.cgi

      

  • Преобразование файла шрифта ttf в svg

      

    http://www.freefontconverter.com/

      

  • Преобразование файла шрифта ttf в woff (необязательно)

      

    http://ttf2woff.com/

      

  • Перетащите все шрифты (ttf, eot, svg, woff...) в местоположение вашего файла, когда Visual Studio 2012 открыт.

  • Опубликовать свой проект

Ответ 5

Это зависит от этой строки кода в BundleConfig:

        BundleTable.EnableOptimizations = true;

если это правда, вам нужно изменить путь к файлам шрифтов;

../ показывает root path, main folder of your project. И тогда вам нужно написать остаток пути.

Mine. Когда это правда:

font-family: 'Icons';
    src:url('../_include/css/fonts/Icons.eot');
    src:url('../_include/css/fonts/Icons.eot?#iefix') format('embedded-opentype'),
        url('../_include/css/fonts/Icons.woff') format('woff'),
        url('../_include/css/fonts/Icons.ttf') format('truetype'),
        url('../_include/css/fonts/Icons.svg#Icons') format('svg');
    font-weight: normal;
    font-style: normal;

Когда оно ложно:

font-family: 'Icons';
    src:url('fonts/Icons.eot');
    src:url('fonts/Icons.eot?#iefix') format('embedded-opentype'),
        url('fonts/Icons.woff') format('woff'),
        url('fonts/Icons.ttf') format('truetype'),
        url('fonts/Icons.svg#Icons') format('svg');
    font-weight: normal;
    font-style: normal;

Ответ 6

Это также проблема MIME TYPE в IIS, просто добавьте расширение файла .woff и оно будет работать

Ответ 7

это сработало для меня: <link href= "~/Content/font-awesome-4.2.0/css/font-awesome.css" rel= 'stylesheet' type = 'text/css'/>

Пришлось связать Прямо URl

Ответ 8

В моем проекте ASP.NET MVC с включенным пакетом в BundleConfig.cs было выполнено следующее:

Откройте файл font-awesome.css и измените @font-face на следующее:

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

Мне пришлось добавить ../ перед каждым url.

Ответ 9

У меня была та же проблема. Шрифты были показаны на локальном правильном уровне, но когда я увеличил его до сервера, были показаны только пустые квадраты.
Иногда это может произойти, потому что имя файла, указанное в атрибуте src файла шрифта FontAwesome, отличается от фактического имени файла шрифта. В моем случае я нашел это так в fontavesome файле css:


      

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

      Но фактические имена файлов шрифтов были такими же,        
        font/fontawesome-webfont_2d2816fe.eot
        font/fontawesome-webfont_aea8981c.eot
        font/fontawesome-webfont_aea8981c.ttf
        font/fontawesome-webfont_aea8981c.woff
  

  

      хотя имя не соответствовало должным образом в файле css после подчеркивания, оно отлично работало на локальном. Поэтому было трудно сказать, в чем была причина.
Когда я редактировал имя файла в файле FontAwesome css src с точными фактическими именами, он работал.   

Ответ 10

У меня ничего не получалось. У меня есть страница Webform, на которой размещено угловое приложение. Угловое приложение использует веб-шрифты.

Трюк с CssRewriteUrlTransform() был верным направлением, но потом я нашел это расширение для комплектации, которое дало окончательное решение!

AspNetBundling

Вам не нужно использовать расширение дырки, просто скопируйте класс CssRewriteUrlTransformFixed и используйте его вместо оригинала.

Ответ 11

Я перепробовал все предложения выше, и ни одно из них не работает. Затем я попытался переместить файл CSS шрифта в другой файл CSS, и волшебство произошло. Все начинает работать без проблем. Обратите внимание, что позже вы можете связать новый CSS файл через ваш комплектный файл.