[twitter-bootstrap-3] 부트 스트랩 3 글 리피 콘이 작동하지 않습니다

부트 스트랩 3.0을 다운로드했는데 글리프 아이콘이 작동하지 않습니다. “E003″오류가 발생합니다. 왜 이런 일이 일어나고 있습니까? 로컬과 온라인 모두에서 시도했지만 여전히 같은 문제가 발생합니다.



답변

나는 같은 문제가 있었고이 페이지의 숨겨진 의견을 제외하고는 그것에 관한 정보를 찾을 수 없었습니다. Chrome에 따라 글꼴 파일이 제대로로드되었지만 아이콘이 제대로 표시되지 않았습니다. 나는 이것을 다른 사람들에게 희망적으로 도울 수 있도록 대답하고 있습니다.

Bootstrap 3의 사용자 정의 도구에서 다운로드 한 글꼴 파일에 문제가 있습니다. 올바른 글꼴을 얻으려면 Bootstrap 홈페이지 로 이동 하여 전체 .zip 파일을 다운로드하십시오. 네 개의 글꼴 파일을 거기에서 글꼴 디렉토리로 추출하면 모든 것이 작동합니다.


답변

독자들에게 참고 : 반드시 읽어보십시오 user2261073의 코멘트 @제프의 대답 @ 맞춤 설정의 버그에 관한. 문제의 원인 일 수 있습니다.


글꼴 파일이 올바르게로드되지 않았습니다. 파일이 예상 위치에 있는지 확인하십시오.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

다니엘이 지적했듯이 mimetype 문제 일 수도 있습니다. Chrome의 개발 도구는 네트워크 탭에 다운로드 한 글꼴을 표시합니다.

크롬 네트워크 탭 글꼴 다운로드


답변

제 경우에는 glyphicons-halflings-regular.woff에 대한 404를 얻었습니다. 모바일 브라우저에서 보이지 않는 글리프 아이콘을 얻었습니다.

Woff의 MIME 유형에 대해 약간의 혼동이있는 것 같습니다. 다른 브라우저에서 둘 이상의 MIME 유형을 허용하지만 W3C는 말합니다 .

application/font-woff

편집 : woff에 대한 다음 MIME 유형을 테스트 한 후 현재 모든 브라우저에서 작동합니다.

application/x-font-woff

편집 : 현재 최신 버전의 부트 스트랩 (3.3.5)은 .woff와 동일한 초기 결과를 가진 .woff2 글꼴을 사용합니다 .W3C는 여전히 사양을 정의 하지만 MIME 유형은 다음과 같습니다.

application/font-woff2


답변

-최고 등급의 답변을 따랐는데 여전히 작동하지 않는 경우 :

Font폴더는 반드시 당신의 CSS 폴더와 같은 수준에합니다. 경로를 수정 bootstrap.css 하지 않습니다 작동 .

Bootstrap.css다음 과 같이 정확하게Fonts 폴더 를 탐색해야합니다 .

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}


답변

다른 솔루션이 작동하지 않으면 Bootstrap을 사용하여 모든 것을 수행하는 대신 외부 소스에서 Glyphicon을 가져와보십시오. 이것을하기 위해:

HTML에서이 작업을 수행 할 수 있습니다.

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

또는 CSS :

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

이 글타래에서 edsiofi의 기여 : Bootstrap 3 Glyphicons CDN


답변

다른 누군가가 여기에 있고 Bootstrap> = v4.0을 사용하는 경우 : glyphicon 지원이 중단됩니다

릴리스 정보의 관련 부분 :

Glyphicons 아이콘 글꼴을 삭제했습니다. 아이콘이 필요한 경우 일부 옵션은 다음과 같습니다.

글 리피 콘 의 업스트림 버전

옥 티콘

멋진 글꼴

출처: https://v4-alpha.getbootstrap.com/migration/#components

글리프 콘을 사용하려면 별도로 다운로드해야합니다.

나는 개인적으로 Font Awesome을 시도했지만 꽤 좋습니다. 아이콘 추가는 glypicon 방식과 유사합니다.

<i class="fas fa-chess"></i>


답변

나는이 오래된 질문을 살펴보고 있었고 지금까지 정답이었던 것이 의견에 나에게 주어 졌기 때문에 나는 그것에 대한 크레딧을받을 가치가 있다고 생각합니다.

부트 스트랩의 사용자 정의 도구에서 다운로드글리프 콘 글꼴 파일이 부트 스트랩의 홈페이지에서 찾은 리디렉션에서 다운로드글리프 콘 글꼴 파일과 동일하지 않다는 문제가있었습니다. 정상적으로 작동하는 것은 다음 링크에서 다운로드 할 수있는 것입니다.

http://getbootstrap.com/getting-started/#download

오래된 잘못된 사용자 지정자 파일에 문제가있는 사람은 위의 링크에서 글꼴을 덮어 써야합니다.