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.
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
sumber
fonts
folder saya di aplikasi MVC5 sayaTambahkan yang ini ke html Anda jika Anda hanya memiliki akses ke html:
sumber
Bagi saya, masalahnya ada dua: Pertama, versi IIS yang saya tangani tidak tahu tentang
.woff2
tipe 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.css
dengan beberapa file lain sebagai"~/bundles/css/site"
. Sementara itu, file font saya ada di"~/fonts"
.bootstrap.css
mencari 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
glyphicon
file font yang memuat. Gejalanya adalah semua contohglyphicon
mesin 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.sumber
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.
sumber
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.
sumber