부트 스트랩 3에서 글 리피 콘을 제대로 표시 할 수 없음

부트 스트랩 3에서 글 리피 콘을 제대로 표시 할 수 없음

---

부트 스트랩 2.3에서 부트 스트랩 3으로 마이그레이션 중이며 모든 것이 잘 작동합니다. 하지만 아이콘을 추가하려고했는데 아이콘 글꼴이 제대로 표시되지 않습니다. 여기 http://bootply.com/61521 을 살펴 보았는데 '.glyphicon-envelope'만 제대로 표시되었습니다. 다른 것들은 'E001'과 같이 표시됩니다.

이 문제를 어떻게 해결할 수 있습니까?

다른 브라우저에서는 glyphicon이 제대로 표시되지만 firefox 만 제대로 표시 할 수 없습니다.

---

네, 제 문제는 위의 답변이 아닙니다. 부트 스트랩 CSS 및 js 폴더 (예 : / theme / bootstrap3 / ..)와 동일한 위치에 글꼴 폴더가 있었지만 루트에서 글꼴 폴더를 찾고있었습니다 (예 : / fonts / glyph .. .woff).

나를위한 해결책은 @ icon-font-path 변수를 올바른 상대 경로로 설정하는 것이 었습니다.

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

---

맞춤형 버전의 부트 스트랩을 선택하셨습니까? 사용자 지정 패키지에 포함 된 글꼴 파일이 손상되는 문제가 있습니다 ( https://github.com/twbs/bootstrap/issues/9925 참조 ). CDN을 사용하지 않으려면 수동으로 다운로드하고 자신의 글꼴을 다운로드 한 글꼴로 바꿔야합니다.

https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot

그 후 강력한 재 장전 (CTRL + F5)을 시도해보세요. 도움이되기를 바랍니다.

---

아이콘과 CSS는 이제 부트 스트랩에서 분리됩니다. 여기에 다른 stackoverflow 답변의 바이올린이 있습니다.

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

http://jsfiddle.net/aQrPd/1/

부트 스트랩 3 Glyphicons CDN

---

나를 위해 일한 수정 사항이 있습니다. Firefox에는이를 유발하는 파일 원본 정책이 있습니다. 수정하려면 다음 단계를 수행하십시오.

1. firefox에서 about : config 열기
2. security.fileuri.strict_origin_policy 속성을 찾아 'true'에서 'false'로 변경합니다.
3. Voial! 당신은 갈 수 있습니다!

세부 정보 : http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts

file : /// 프로토콜을 사용하여 파일에 액세스 할 때만이 문제가 나타납니다.

---

로컬 아파치 서버를 사용하여 동일한 문제가 발생했습니다. 이것은 내 문제를 해결했습니다.

http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons

Amazon s3의 경우 CORS 구성을 편집해야합니다.

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

---

먼저 zip 파일을 사용하여 "oficial"방식으로 glyphicons 글꼴을 설치하려고합니다. 나는 그것을 할 수 없었다.

이것은 내 단계별 솔루션입니다.

1. Bootstrap의 웹 페이지로 이동 한 다음 "구성 요소"섹션으로 이동합니다.
2. 브라우저 콘솔을 엽니 다. Chrome에서 Ctrl + Shift + C.
3. Resources 섹션의 Frames / getbootstrap.com / Fonts에서 실제로 glyphicon을 실행하는 글꼴을 찾을 수 있습니다. 캐시를 회피하려면 비공개 모드를 사용하는 것이 좋습니다.
4. 글꼴 파일의 URL (리소스 목록에 표시된 파일을 마우스 오른쪽 버튼으로 클릭)을 사용하여 새 탭에 복사하고 Enter 키를 누릅니다. 글꼴 파일을 다운로드합니다.
5. 탭의 URL을 다시 복사하고 글꼴 확장자를 eot, ttf, svg 또는 woff로 변경하십시오.

그러나 더 쉬운 액세스를 위해 이것은 woff 파일의 링크입니다.

http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff

---

결국 Font-Awesome Icons로 전환했습니다. 그것들은 더 좋지는 않더라도 좋으며, 당신이해야 할 일은 글꼴로 링크하는 것뿐입니다.

---

글꼴 이름이 포함 된 폴더의 이름이 "font"가 아닌 "fonts"인지 확인하십시오.

---

다음과 같은 태그를 사용할 수 있습니다.

<i class="fa fa-edit"></i>

---

경우에 따라 :

For example, I just tryed <span class="icones glyphicon glyphicon-pen"> and after one hour i realized that this icon was not included in the bootstrap pack !! While the enveloppe icon was working fine..

Hope this helps

---

As others have noted, there are some issues with the customizer.

I was having troubles with the glyphicons not showing either, as well as issues with the navbar layout.

I used the suggestion and uploaded the fonts from the full zip/overwrote the ones from the customized version and that fixed the icons issues.

I also pulled in the CDN CSS and javascript instead of my local copy from the CDN. This fixed my navbar issues.

So I recommend until you get the hang of Bootstrap, not to use the customized version since you might get some frustrating, unwanted results.

---

For me placing my fonts folder as per location specified in bootstrap.css solved the problem

Mostly its fonts folder should be in parent directory of bootstrap.css file .

I faced this problem , and researching many answers , if anyone still in 2015 faces this problem then its either a CSS problem , or location mismatch for files .

The bug has already been solved by bootstrap

---

This is the official documentation supporting the above answers.

Changing the icon font location Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways: Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Utilize the relative URLs option provided by the Less compiler. Change the url() paths in the compiled CSS. Use whatever option best suits your specific development setup.

Other than this one mistake the new users would do is, after downloading the bootstrap zip from the official website. They would tend to skip the fonts folder for copying in their dev setup. So missing fonts folder can also lead to this problem

---

1. Try using CDN
2. Try setting Access-Control-Allow-Origin HTTP Header

ReferenceURL : https://stackoverflow.com/questions/18245575/bootstrap-3-unable-to-display-glyphicon-properly