Font-awesome не работает bundleconfig в MVC5

Если я ссылаюсь на font-awesome.css на странице _layouts. он будет работать

<link href="~/Content/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" />

Но я использовал в BundleConfig.cs. Значок не отображается.

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

а также я наблюдал, что в консоли браузера есть ошибка в каталоге шрифтов. Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:51130/fonts/fontawesome-webfont.woff?v=4.0.3

что может быть проблемой?

Ответы

Ответ 1

Попробуйте использовать CssRewriteUrlTransform при связывании:

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());

Это изменяет любые URL-адреса ресурсов из файла css на абсолютные URL-адреса, чтобы связывание не мешало относительному пути.

Документы для CssRewriteUrlTransform

Ответ 2

Мое решение было простым: запустите PM > Install-Package FontAwesome и укажите правильный путь:

.Include("~/Content/font-awesome.min.css")

Ответ 3

У меня было такое же сообщение об ошибке и исправлено после установка типов mime для веб-шрифтов в IIS.

Ответ 4

В версии 5.1.0 мне пришлось ссылаться на all.css вместо fontawesome.css т.е.

bundles.Add(new StyleBundle("~/bundles/fontawesome").Include(
    "~/Content/all.css",
    new CssRewriteUrlTransform()
));

Ответ 5

У меня также было такое же сообщение об ошибке. Мне пришлось выполнить комбинацию ответов, перечисленных в этой теме:

Добавьте эту строку кода, предложенную @Simon C:

.Include( "~/Content/font-awesome-4.0.3/css/font-awesome.css", новый CssRewriteUrlTransform());

Это работало, чтобы исправить относительные URL-адреса, однако мне пришлось удалить файл font-awesome.min.css из моего каталога bower каждый раз, когда я публиковал иначе, связующее устройство запуталось бы и не включило бы и не уменьшило бы шрифт-awesome. css файл. Так что...

Мне нужно было сделать то, что @miha предложила в комментарии, и исправить относительные URL-адреса в файле font-awesome.min.css с помощью CssRewriteUrlTransform(). Поэтому я решил переписать URL-адреса в файле .min и просто указать, что вместо unminified версии и это сработало:

.Include( "~/Content/font-awesome-4.0.3/css/font-awesome.min.css", новый CssRewriteUrlTransform());

Если я правильно понял, связующий не будет пытаться снова минимизировать файл .min, потому что он уже изменен. Единственный "недостаток" - это не конкатенация содержимого font-awesome.min.css в один файл css, создаваемый компоновщиком. Он будет включен отдельно.

Ответ 6

Я добавлю еще один ответ на этот вопрос, если я нашел решение, смешав некоторые из них.

Ответ с наибольшим количеством голосов является основным решением, но также важно
Добавьте запись, предложенную этим ответом. в заключение
Следуйте комментарию @feradz в ответе с наибольшим количеством голосов: "удалите версию .min.css - это приводило к тому, что оптимизатор не генерировал свернутую версию с правильным путем"

Последний пункт является ключевым из всех: распространяемые версии файлов js "min" не подчиняются правилам "CssRewriteUrlTransform". Таким образом, ручное удаление bootstrap.min.css, font-awesone.min.css окончательно решило проблему.