부트 스트랩 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

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

Azure 웹 사이트에 woff MIME 구성 이 없습니다 . web.config에 다음 항목을 추가해야합니다.

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

@Stijn에서 설명한 것처럼 Bootstrap.css이 패키지를 설치할 때 의 기본 위치 가 잘못되었습니다.Nuget .

이 섹션을 다음과 같이 변경하십시오.

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

이 코드 줄을 추가하고 완료 할 수 있습니다.

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

감사.

IIS는 .woff기본적으로 파일을 서버하지 않으므로 IIS에서는 파일에 <mimeMap>항목을 추가 해야 web.config합니다.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

fonts 디렉토리에 아래 파일이 모두 있습니까?

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

변수가 적은 파일을 수정했습니다.

@icon-font-path:          "fonts/";    

원래는

@icon-font-path:          "../fonts/"; 

문제가 발생했습니다

bootstrap.css 및 bootstrap.min.css의 잘못된 코딩 때문입니다. Customizer에서 Bootstrap 3.0을 다운로드 할 때 다음 코드가 누락되었습니다.

@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');
}

이것은 Glyphicon을 사용하기위한 주요 코드이므로 작동하지 않습니다 ...

전체 패키지에서 CSS 파일을 다운로드하면이 코드가 구현됩니다.

이것이 아이콘이 나에게 나타나지 않은 이유입니다.

* {
    arial, sans-serif !important;
}

내이 부분을 제거한 후 CSS모든 것이 정상적으로 작동했습니다. 중요한 것은 문제를 일으키는 원인이었습니다.

또 다른 문제 / 해결 방법으로이 Bootstrap 2.x 코드가있을 수 있습니다.

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

가이드 ( .icon-* ---> .glyphicon .glyphicon-*) 에 따라 마이그레이션 할 때 :

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

아이콘 클래스 (글꼴 참조 포함)를 추가하는 것을 잊었습니다.

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

아래는 나를 위해 고친 것입니다. Firebug 콘솔에서 "잘못된 URI"오류가 발생했습니다. 아이콘이 E ### 숫자로 표시되었습니다. 내 'fonts'디렉토리에 .htaccess 파일을 추가해야했습니다. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> 가능한 중복 : 파이어 폭스에서 다운로드 가능한 글꼴 : 잘못된 URI 또는 ​​사이트 간 액세스가 허용되지 않음

이것은 매우 긴 촬영이지만, 제 경우였으며 아직 여기에 없었기 때문입니다.

gulp-sass또는을 사용하여 SASS에서 Twitter 부트 스트랩을 컴파일하는 경우 grunt-sass.node-sass. 특히 오래된 프로젝트에서 작업중인 경우 노드 모듈이 최신 상태인지 확인하십시오.

SASS 지시문 @at-root이 @font-faceglyphicons 의 정의에 사용 된 것은 시간이 지남 에 따라 https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss를 참조 하십시오. .

여기에 문제가 있습니다 node-sass. 지시문이 너무 오래된 경우 지시문을 libsass지원하지 마십시오 @at-root. 이 경우 브라우저가 무엇을 해야할지 전혀 모르는 줄 @font-face바꿈됩니다 @at-root. 그 결과 글꼴이 다운로드되지 않으며 아이콘 대신 가비지가 표시 될 수 있습니다.

참고 : 아래는 틈새 시나리오 일 가능성이 있지만 다른 누군가가 유용하다고 생각하는 경우 공유하고 싶었습니다.

Rails 프로젝트에서 우리는 Rails 엔진을 사용하는 gem을 통해 약간의 재사용을하고 bootstrap-sass있습니다. 글리프 콘 글꼴 경로 해상도를 제외하고는 모두 주요 프로젝트에 잘 참여했습니다.

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

우리는 그것이 사실이라고 예상했을 때 해결책 $bootstrap-sass-asset-helper이 false진행되는 동안, 경로가 다르다는 것을 알았습니다 .

다음 $bootstrap-sass-asset-helper을 수행하여 엔진 젬에서를 초기화했습니다.

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

예를 들어 경로가 다음과 같이 해결되었습니다.

/assets/bootstrap/glyphicons-halflings-regular.woff

다시, 이것은를 사용하는 일반 레일 프로젝트에서 필요하지 않아야합니다 bootstrap-sass. 우리는 많은 견해를 재사용하고 있으며 우리에게 도움이되었습니다. 잘하면 이것은 다른 사람을 도울 수 있습니다.

렌더링되지 않는 글꼴에 관한 공식 문서는 다음과 같습니다.

아이콘 글꼴 위치 변경 부트 스트랩은 아이콘 글꼴 파일이 컴파일 된 CSS 파일과 관련하여 ../fonts/ 디렉토리에 있다고 가정합니다. 이러한 글꼴 파일을 이동하거나 이름을 바꾸면 다음 세 가지 방법 중 하나로 CSS가 업데이트됩니다. 소스 Less 파일에서 @ icon-font-path 및 / 또는 @ icon-font-name 변수를 변경합니다. Less 컴파일러가 제공하는 상대 URL 옵션을 활용하십시오. 컴파일 된 CSS에서 url () 경로를 변경하십시오. 특정 개발 설정에 가장 적합한 옵션을 사용하십시오.

그 외에는 fonts 폴더를 루트 디렉토리 로 복사하지 못했을 수도 있습니다.

이 문제가 있었고 variables.less 파일로 인해 발생했습니다. icon-font-path 값을 설정하기 위해이를 재정의하면 문제가 해결되었습니다.

구조화 된 파일은 다음과 같습니다.

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

Content의 루트에 내 자신의 variables.less 파일을 추가하고 styles.less에서이 파일을 참조하면 404 오류가 해결되었습니다.

Variables.less는 다음을 포함합니다 :

@icon-font-path:          "fonts/";

NuGet에서 Bootstrap을 받았습니다. 내 사이트를 게시했을 때 글리프가 작동하지 않았습니다.

필자의 경우 각 글꼴 파일의 빌드 작업을 'Content'로 설정하고 'Copy Always'로 설정하여 작업했습니다.

glyphicon-arrow-down에 대한 상자 너비 코드 \ e094가 있었으며 실제로 CSS 클래스에 glyphicon 을 추가하는 문제 를 다음과 같이 해결했습니다.

<i class="glyphicon  glyphicon-arrow-down"></i>

누군가를 도울 수 있다면 ...

예를 들어, 폰트 패밀리를 과도하게 지정하지 마십시오

*{font-family: Verdana;}

i 요소에서 halflings 글꼴을 제거합니다.

브라우저에서 글꼴 파일을 찾을 수없는 것과 동일한 문제가 발생했으며 문제는 index.php처리 를 위해 전송해서는 안되는 파일을 허용하는 .htaccess 파일에서 제외 되었기 때문 입니다. 글꼴 파일을로드 할 수 없으므로 문자가 BLOB로 대체되었습니다.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

당신이 볼 수 있듯이, 이미지, RSS 및 XML과 같은 파일은 재 작성에서 제외되지만, 글꼴 파일은 다음 .woff과 .woff2이들 또한 화이트리스트에 추가 필요하므로, 파일.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

화이트리스트에 woff및 woff2화이트리스트에 추가 하면 글꼴 파일을로드 할 수 있으며 글리프 아이콘이 올바르게 표시됩니다.

이 순서로 설정해야합니다.

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @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'); } 
</style>

나를 위해 일한 것은 다음 경로를 대체하는 것이 었습니다.

@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');
}

에

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

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

부트 스트랩 3에 아이콘을 포함시키는 방법입니다

<span class="glyphicon glyphicon-bell"></span>

http://glyphicons.bootstrapcheatsheets.com/

희망이 도움이됩니다.

@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');}

네임 스페이스와 glyphicons가있는 부트 스트랩을 사용하고 있지만 코드 glyphicons에 위의 줄을 추가 한 후에는 정상적으로 작동합니다.

방금 Ctrl + c, Ctrl + v를 사용하여 bootstrap.css에서 글꼴의 이름을 바꿨습니다.