Bagaimana menghapus kesalahan tentang glyphicons-halflings-regular.woff2 tidak ditemukan

95

Aplikasi ASP.NET MVC4 Bootstrap 3 berjalan dari Microsoft Visual Studio Express 2013 untuk Web IDE.

Konsol Chrome selalu menampilkan kesalahan

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

File ini ada di direktori font di Solution Explorer. Tindakan build diatur ke "Konten" dan Salin ke direktori Output adalah "Jangan salin seperti di file font lain". Bootstrap 3 ditambahkan ke solusi menggunakan NuGet. Bagaimana cara mengatasinya agar kesalahan ini tidak terjadi? Aplikasi menunjukkan ikon Glyphicon dan FontAwesome dengan benar. Kesalahan ini selalu terjadi saat memulai aplikasi.

Andrus
sumber

Jawaban:

239

Masalah ini terjadi karena IIS tidak mengetahui tentang woffdan woff2jenis file mime.

Solusi 1:

Tambahkan baris ini di proyek web.config Anda:

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

Solusi 2:

Pada halaman proyek IIS:

Langkah 1: Buka halaman beranda IIS proyek Anda dan klik dua kali MIME Typestombol:

Langkah 1

Langkah 2: Klik Addtombol dari Actionsmenu: Langkah 2

Langkah 3: Di tengah layar muncul sebuah jendela dan di jendela ini Anda perlu menambahkan dua baris dari solusi 1: LANGKAH 3

TotPeRo
sumber
Ini menyelesaikannya untuk saya, tetapi mengapa? Saya akan menghargai penjelasan mengapa solusinya bekerja lebih dari sekedar salin / tempel kode yang disediakan.
Bpainter
3
@Bpainter Baris pertama dalam jawaban ini memberi tahu Anda alasannya. Jenis mime tidak terkait dengan suatu jenis sehingga gagal dimuat oleh browser. Mengapa browser tidak memuat file jenis mime yang tidak terkait? Saya pikir itu adalah pertanyaan terpisah yang saya tidak tahu jawabannya.
Camille Sévigny
4
@ CamilleSévigny Saya yakin jawaban atas pertanyaan Anda adalah bahwa IIS hanya menyediakan jenis file yang valid, jadi karena IIS tidak mengenali ekstensi .woff dan .woff2, IIS menanggapi permintaan untuk file ini dengan 404 - tidak ditemukan.
Grungondola
@ CamilleSévigny Terima kasih, ketika saya membuat komentar itu, baris pertama tidak ada. Itu diedit setelah fakta. Tanpa komentar Anda, saya tidak akan pernah melihatnya.
Bpainter
Dalam kasus saya, masalahnya adalah CssRewriteUrlTransform yang saya gunakan dalam Bundle bootstrap dan Font-Awesome. Jika Anda mempertahankan struktur folder normalnya, tidak perlu menggunakan opsi ini.
g_brahimaj
48

Dalam kasus saya, saya baru saja mengunduh file yang hilang langsung dari sini: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Reza Mamun
sumber
7
memecahkannya untuk saya. Terima kasih. Saya mengunduh file, dan menyimpan folder font di bawah direktori proyek saya. File CSS di folder "css", font di folder "font"
CyprUS
1
Terkadang solusinya cukup sederhana, dan kami tidak menyadari :) Terima kasih untuk solusinya, saya melewatkan ini di fontsfolder saya di aplikasi MVC5 saya
Irfaan
6

Tambahkan yang ini ke html Anda jika Anda hanya memiliki akses ke html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
FMF
sumber
Terima kasih, solusi ini berhasil untuk saya. Namun, menambahkan tag <staticContent> di web.config sesuai ini - stackoverflow.com/questions/46508793/… - tidak berhasil untuk saya.
BUDDHIKA
5

Bagi saya, masalahnya ada dua: Pertama, versi IIS yang saya tangani tidak tahu tentang .woff2tipe MIME, hanya tentang .woff. Saya memperbaikinya menggunakan Manajer IIS di tingkat server, bukan di tingkat aplikasi web, sehingga pengaturan tidak akan diganti dengan setiap penerapan aplikasi baru. (Di bawah Manajer IIS, saya pergi ke tipe MIME, dan menambahkan yang hilang .woff2, lalu memperbarui .woff.)

Kedua, dan yang lebih penting, saya membundel bootstrap.cssdengan beberapa file lain sebagai "~/bundles/css/site". Sementara itu, file font saya ada di "~/fonts". bootstrap.cssmencari font glyphicon di "../fonts", yang diterjemahkan ke "~/bundles/fonts"- jalan yang salah.

Dengan kata lain, jalur bundel saya adalah satu direktori terlalu dalam. Saya mengganti namanya menjadi "~/bundles/siteCss", dan memperbarui semua referensi yang saya temukan di proyek saya. Sekarang bootstrap mencari "~/fonts"file glyphicon, yang berfungsi. Masalah terpecahkan.

Sebelum saya tetap masalah kedua di atas, tidak ada satu glyphiconfile font yang memuat. Gejalanya adalah semua contoh glyphiconmesin terbang dalam proyek tersebut hanya menunjukkan kotak kosong. Namun, gejala ini hanya terjadi di versi aplikasi web yang diterapkan, bukan di mesin dev saya. Saya masih tidak yakin mengapa itu terjadi.

Stephen G Tuggy
sumber
3

Saya mencoba semua saran di atas, tetapi masalah saya yang sebenarnya adalah aplikasi saya mencari folder / font dan isinya (.woff dll) di app / font, tetapi folder / font saya berada pada level yang sama dengan / app. Saya memindahkan / font di bawah / app, dan sekarang berfungsi dengan baik. Saya harap ini membantu orang lain menjelajahi web untuk mendapatkan jawaban.

lingkaran
sumber
1

Masalah ini terjadi karena IIS tidak menemukan yang sebenarnya lokasi dari jenis mime file woff2. Setel URL font-face dengan benar, juga pertahankan font-family sebagai glyphicons-halflings-regular di file CSS Anda seperti yang ditunjukkan di bawah ini.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}
Diwas Poudel
sumber