glyphicons-halflings-regular.woff2 찾을 수 없음에 대한 오류를 제거하는 방법
ASP.NET MVC4 Bootstrap 3 응용 프로그램은 Web IDE 용 Microsoft Visual Studio Express 2013에서 실행됩니다.
Chrome 콘솔에 항상 오류가 표시됨
http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)
이 파일은 솔루션 탐색기의 글꼴 디렉터리에 있습니다. 빌드 동작은 "내용"으로 설정되고 출력 디렉토리에 복사는 "다른 글꼴 파일처럼 복사하지 않음"입니다. NuGet을 사용하여 부트 스트랩 3이 솔루션에 추가됩니다. 이 오류가 발생하지 않도록 수정하는 방법은 무엇입니까? 응용 프로그램은 Glyphicon 및 FontAwesome 아이콘을 올바르게 표시합니다. 이 오류는 항상 응용 프로그램 시작시 발생합니다.
이 문제는 IIS가 woff
및 woff2
파일 MIME 유형을 모르기 때문에 발생 합니다.
해결책 1 :
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>
해결책 2 :
IIS 프로젝트 페이지에서 :
1 단계 : 프로젝트 IIS 홈 페이지로 이동하여 MIME Types
버튼을 두 번 클릭 합니다.
2 단계 : 메뉴 에서 Add
버튼을 클릭 Actions
합니다.
3 단계 : 화면 중앙에 창이 나타나고이 창에는 솔루션 1의 두 줄을 추가해야합니다.
제 경우에는 여기에서 직접 누락 된 파일을 다운로드했습니다 : https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2
html에만 액세스 할 수있는 경우 다음을 html에 추가하십시오.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
I tried all the suggestions above, but my actual issue was that my application was looking for the /font folder and its contents (.woff etc) in app/fonts, but my /fonts folder was on the same level as /app. I moved /fonts under /app, and it works fine now. I hope this helps someone else roaming the web for an answer.
For me, the problem was twofold: First, the version of IIS I was dealing with didn't know about the .woff2
MIME type, only about .woff
. I fixed that using IIS Manager at the server level, not at the web app level, so the setting wouldn't get overridden with each new app deployment. (Under IIS Manager, I went to MIME types, and added the missing .woff2
, then updated .woff
.)
Second, and more importantly, I was bundling bootstrap.css
along with some other files as "~/bundles/css/site"
. Meanwhile, my font files were in "~/fonts"
. bootstrap.css
looks for the glyphicon fonts in "../fonts"
, which translated to "~/bundles/fonts"
-- wrong path.
In other words, my bundle path was one directory too deep. I renamed it to "~/bundles/siteCss"
, and updated all the references to it that I found in my project. Now bootstrap looked in "~/fonts"
for the glyphicon files, which worked. Problem solved.
나는 위의 두 번째 문제를 해결하기 전에, 아무도 의 glyphicon
글꼴 파일을로드하지 않았다. 증상은 glyphicon
프로젝트 의 모든 글리프 인스턴스가 빈 상자를 표시한다는 것입니다. 그러나이 증상은 내 dev 컴퓨터가 아닌 웹 앱의 배포 된 버전에서만 발생했습니다. 왜 그랬는지 아직도 모르겠습니다.
이 문제는 IIS가 woff2 파일 MIME 형식 의 실제 위치 를 찾지 못하기 때문에 발생 합니다. font-face의 URL을 올바르게 설정하고 아래와 같이 CSS 파일에서 font-family를 glyphicons-halflings-regular 로 유지하십시오.
@font-face {
font-family: 'glyphicons-halflings-regular';
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}
'developer tip' 카테고리의 다른 글
Devise에서 사용자의 비밀번호를 확인하는 방법 (0) | 2020.08.29 |
---|---|
Ruby에서 기존 해시에 추가하는 방법 (0) | 2020.08.29 |
APNS 장치 토큰이 생성되면 변경됩니까? (0) | 2020.08.29 |
JQuery UI 자동 완성 도우미 텍스트를 제거 / 변경하는 방법은 무엇입니까? (0) | 2020.08.29 |
Android에서 문자열 너비를 얻는 방법은 무엇입니까? (0) | 2020.08.29 |