Jak usunąć błąd dotyczący nie znaleziono glyphicons-halflings-regular.woff2

95

Aplikacja ASP.NET MVC4 Bootstrap 3 działa z Microsoft Visual Studio Express 2013 dla Web IDE.

Konsola Chrome pokazuje zawsze błąd

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

Ten plik istnieje w katalogu czcionek w Eksploratorze rozwiązań. Akcja kompilacji jest ustawiona na „Treść”, a Kopiuj do katalogu wyjściowego to „Nie kopiuj jak w innych plikach czcionek”. Bootstrap 3 jest dodawany do rozwiązania przy użyciu NuGet. Jak to naprawić, aby ten błąd nie występował? Aplikacja poprawnie wyświetla ikony Glyphicon i FontAwesome. Ten błąd występuje zawsze podczas uruchamiania aplikacji.

Andrus
źródło

Odpowiedzi:

239

Ten problem występuje, ponieważ IIS nie wie woffi woff2plików typy MIME.

Rozwiązanie 1:

Dodaj te linie do swojego projektu web.config:

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

Rozwiązanie 2:

Na stronie projektu IIS:

Krok 1: Przejdź do strony głównej swojego projektu IIS i kliknij dwukrotnie MIME Typesprzycisk:

Krok 1

Krok 2: Kliknij Addprzycisk z Actionsmenu: Krok 2

Krok 3: Na środku ekranu pojawia się okno, w którym należy dodać dwie linie z rozwiązania 1: Krok 3

TotPeRo
źródło
To rozwiązało to dla mnie, ale dlaczego? Byłbym wdzięczny za wyjaśnienie, dlaczego to rozwiązanie działa bardziej niż bezmyślne kopiowanie / wklejanie dostarczonego kodu.
Bpainter
3
@Bpainter Pierwsza linia tej odpowiedzi zawiera wyjaśnienie, dlaczego. Typy MIME nie są powiązane z typem, więc przeglądarka nie ładuje ich. Dlaczego przeglądarka nie wczytuje niepowiązanego pliku typu MIME? Myślę, że to osobne pytanie, na które nie znam odpowiedzi.
Camille Sévigny
4
@ CamilleSévigny Uważam, że odpowiedź na twoje pytanie jest taka, że ​​IIS udostępnia tylko prawidłowe typy plików, więc ponieważ nie rozpoznaje rozszerzeń .woff i .woff2, odpowiada na żądania dotyczące tych plików 404 - not found.
Grungondola
@ CamilleSévigny Dzięki, kiedy napisałem ten komentarz, pierwszej linii tam nie było. Został zredagowany po fakcie. Jednak bez twojego komentarza nigdy bym tego nie widział.
Bpainter
W moim przypadku problemem był CssRewriteUrlTransform , którego użyłem w pakiecie bootstrap i Font-Awesome. Jeśli zachowasz ich normalną strukturę folderów, nie ma potrzeby używania tej opcji.
g_brahimaj
48

W moim przypadku właśnie pobrałem brakujący plik bezpośrednio stąd: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Reza Mamun
źródło
7
rozwiązał to dla mnie. Dzięki. Pobrałem pliki i zapisałem folder czcionek w katalogu mojego projektu. Pliki CSS w folderze „css”, czcionki w folderze „fonts”
CyprUS
1
Czasami rozwiązania są dość proste, a my nie jesteśmy świadomi fonts:) Dziękuję za rozwiązanie, przegapiłem to w moim folderze w mojej aplikacji
MVC5
6

Dodaj ten do swojego HTML, jeśli masz dostęp tylko do HTML:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
FMF
źródło
Dzięki, to rozwiązanie zadziałało dla mnie. Ale dodanie tagu <staticContent> w web.config zgodnie z tym - stackoverflow.com/questions/46508793/… - nie działało dla mnie.
BUDDHIKA
5

Dla mnie problem był dwojaki: po pierwsze, wersja IIS, z którą miałem do czynienia, nie wiedziała o .woff2typie MIME, tylko o .woff. Naprawiłem to za pomocą Menedżera IIS na poziomie serwera, a nie na poziomie aplikacji internetowej, więc ustawienie nie było zastępowane przy każdym nowym wdrożeniu aplikacji. (W Menedżerze IIS przeszedłem do typów MIME i dodałem brakujące .woff2, a następnie zaktualizowałem .woff).

Po drugie, i co ważniejsze, pakowałem bootstrap.cssrazem z kilkoma innymi plikami jako pliki "~/bundles/css/site". Tymczasem moje pliki czcionek były w formacie "~/fonts". bootstrap.cssszuka czcionek glificowych w programie "../fonts", co oznacza "~/bundles/fonts"- zła ścieżka.

Innymi słowy, moja ścieżka do pakietu była o jeden katalog za głęboka. Zmieniłem jego nazwę na "~/bundles/siteCss"i zaktualizowałem wszystkie odniesienia do niego, które znalazłem w moim projekcie. Teraz bootstrap sprawdził "~/fonts"pliki glifów, które zadziałały. Problem rozwiązany.

Zanim rozwiązałem drugi problem powyżej, żaden z glyphiconplików czcionek się nie ładował. Objawem było to, że wszystkie przypadkiglyphicon glifów w projekcie pokazywały tylko puste pudełko. Jednak ten symptom wystąpił tylko we wdrożonych wersjach aplikacji internetowej, a nie na moim komputerze deweloperskim. Nadal nie jestem pewien, dlaczego tak się stało.

Stephen G Tuggy
źródło
3

Wypróbowałem wszystkie powyższe sugestie, ale moim rzeczywistym problemem było to, że moja aplikacja szukała folderu / font i jego zawartości (.woff itp.) W app / fonts, ale mój folder / fonts był na tym samym poziomie co / app. Przeniosłem / fonts pod / app i teraz działa dobrze. Mam nadzieję, że pomoże to komuś innemu wędrować po sieci w poszukiwaniu odpowiedzi.

cirl
źródło
1

Ten problem występuje, ponieważ usługi IIS nie znajdują rzeczywistej lokalizacji typów MIME pliku woff2. Ustaw prawidłowo adres URL czcionki-twarzy, zachowaj również rodzinę czcionek jako glificons-halfling-regular w pliku CSS, jak pokazano poniżej.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}
Diwas Poudel
źródło