Я использую шрифт awesome в моем проекте (mvc/asp.net). Моя проблема заключается в том, что я отлаживал проект и проверял localhost, проблем с шрифтами не было. Но когда вы публиковали веб-сайт и просматривали веб-страницы, вместо значков я видел маленькие коробки. Я уверен, что он помещен в правильный каталог (где размещены css файлы).
Я не нашел подходящего решения.
Кстати, проблемы с кнопками тоже нет. Они все в порядке, но значки исчезли.
Спасибо
Я только что загрузил вашу веб-страницу и проверил вкладку 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>
Почему шрифт-awesome работает в режиме отладки, но не в IIS?
В Visual Studio по умолчанию некоторые файлы шрифтов не входят во время публикации:
Это связано с тем, что для их действия для сборки установлено значение Нет, это по умолчанию (в MVC, не уверен в WebForms). Вы должны перейти к поврежденным свойствам файла и установить его из "Нет" в "Содержимое".
Вот как я это решил (не вручную перетаскивая файлы, как могут предположить некоторые)
Кредиты идут к этому парню: http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html
Другое решение, которое разрешило эту проблему для меня, можно найти здесь: 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()));
У меня была та же проблема. Решение:
Откройте файл 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
Преобразование файла шрифта ttf в svg
Преобразование файла шрифта ttf в woff (необязательно)
Перетащите все шрифты (ttf, eot, svg, woff...) в местоположение вашего файла, когда Visual Studio 2012 открыт.
Опубликовать свой проект
Это зависит от этой строки кода в 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;
Это также проблема MIME TYPE в IIS, просто добавьте расширение файла .woff и оно будет работать
это сработало для меня: <link href= "~/Content/font-awesome-4.2.0/css/font-awesome.css" rel= 'stylesheet' type = 'text/css'/>
Пришлось связать Прямо URl
В моем проекте 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.
У меня была та же проблема. Шрифты были показаны на локальном правильном уровне, но когда я увеличил его до сервера, были показаны только пустые квадраты.
Иногда это может произойти, потому что имя файла, указанное в атрибуте 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 с точными фактическими именами, он работал.
У меня ничего не получалось. У меня есть страница Webform, на которой размещено угловое приложение. Угловое приложение использует веб-шрифты.
Трюк с CssRewriteUrlTransform() был верным направлением, но потом я нашел это расширение для комплектации, которое дало окончательное решение!
Вам не нужно использовать расширение дырки, просто скопируйте класс CssRewriteUrlTransformFixed и используйте его вместо оригинала.
Я перепробовал все предложения выше, и ни одно из них не работает. Затем я попытался переместить файл CSS шрифта в другой файл CSS, и волшебство произошло. Все начинает работать без проблем. Обратите внимание, что позже вы можете связать новый CSS файл через ваш комплектный файл.