CSS Bootstrap 3 无法正确显示字形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18245575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 unable to display glyphicon properly
提问by iSa
I am migrating from bootstrap 2.3 to bootstrap 3 and everything works well. But when I tried to add some icons, the icon font doesn't displayed properly. I tried to look over here http://bootply.com/61521and only '.glyphicon-envelope' was being displayed properly. Others have displayed like 'E001' and so on.
我正在从 bootstrap 2.3 迁移到 bootstrap 3，一切正常。但是当我尝试添加一些图标时，图标字体显示不正确。我试图在这里查看http://bootply.com/61521并且只有 '.glyphicon-envelope' 被正确显示。其他人已显示如“E001”等。
How can I be able to solve this problem?
我怎样才能解决这个问题？
For other browsers, glyphicons are displayed properly, only firefox was unables to display it properly.
对于其他浏览器，字形显示正常，只有 Firefox 无法正常显示。
采纳答案by brad
OK, my problem was not answered by the above. I had the fonts folder at the same location as the bootstrap css and js folders (eg /theme/bootstrap3/..), but it was looking for the font folder in the root (eg /fonts/glyph.. .woff)
好的，上面没有回答我的问题。我的字体文件夹与 bootstrap css 和 js 文件夹（例如 /theme/bootstrap3/..）位于同一位置，但它正在寻找根目录中的字体文件夹（例如 /fonts/glyph ..woff）
The solution for me was to set the @icon-font-path variable to the correct relative path:
我的解决方案是将 @icon-font-path 变量设置为正确的相对路径：
Eg @icon-font-path: "fonts/";
例如@icon-font-path: "fonts/";
回答by Toni
Did you choose the customized version of Bootstrap? There is an issue that the font files included in the customized package are broken (see https://github.com/twbs/bootstrap/issues/9925). If you do not want to use the CDN, you have to download them manually and replace your own fonts with the downloaded ones:
您是否选择了自定义版本的 Bootstrap？存在自定义包中包含的字体文件损坏的问题（参见https://github.com/twbs/bootstrap/issues/9925）。如果您不想使用 CDN，则必须手动下载它们并将您自己的字体替换为下载的字体：
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svghttps://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woffhttps://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttfhttps://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot
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
After that try a strong reload (CTRL + F5), hope it helps.
之后尝试强力重新加载（CTRL + F5），希望它有所帮助。
回答by Anton
the icons and the css are now seperated out from bootstrap. here is a fiddle that is from another stackoverflow answer
图标和 css 现在从引导程序中分离出来。这是来自另一个stackoverflow答案的小提琴
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
回答by hellojava
Here's the fix that worked for me. Firefox has a file origin policy that causes this. To fix do the following steps:
这是对我有用的修复程序。Firefox 有一个导致这种情况的文件来源策略。要修复执行以下步骤：
- open about:config in firefox
- Find security.fileuri.strict_origin_policy property and change it from ‘true' to ‘false.'
- Voial! you are good to go!
- 在 Firefox 中打开 about:config
- 找到 security.fileuri.strict_origin_policy 属性并将其从“true”更改为“false”。
- 声音！你已准备好出发！
Details: http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts
详情：http: //stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts
You will only see this issue when accessing a file using file:/// protocol
您只会在使用 file:/// 协议访问文件时看到此问题
回答by robodo
I had the same problem using a local apache server. This solved my problem:
我在使用本地 apache 服务器时遇到了同样的问题。这解决了我的问题：
http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons
http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons
For Amazon s3 you need to edit your CORS configuration:
对于 Amazon s3，您需要编辑 CORS 配置：
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
回答by MARC.RS
First of all, I try to install the glyphicons fonts by the "oficial" way, with the zip file. I could not do it.
首先，我尝试通过“官方”方式使用 zip 文件安装 glyphicons 字体。我做不到。
This is my step-by-step solution:
这是我的分步解决方案：
- Go to the web page of Bootstrap and then to the "Components" section.
- Open the browser console. In Chrome, Ctrl+Shift+C.
- In section Resources, inside Frames/getbootstrap.com/Fonts you will find the font that actually is running the glyphicons. It's recommended to use the private mode to evade cache.
- With URL of the font file (right-click on the file showed on resources list), copy it in a new tab, and press ENTER. This will download the font file.
- Copy another time the URL in a tab and change the font extension to eot, ttf, svg or woff, ass you like.
- 转到 Bootstrap 的网页，然后转到“组件”部分。
- 打开浏览器控制台。在 Chrome 中，Ctrl+Shift+C。
- 在资源部分的 Frames/getbootstrap.com/Fonts 中，您将找到实际运行字形图标的字体。建议使用私有模式来逃避缓存。
- 使用字体文件的 URL（右键单击资源列表中显示的文件），将其复制到新选项卡中，然后按 ENTER。这将下载字体文件。
- 再复制一次标签中的 URL 并将字体扩展名更改为 eot、ttf、svg 或 woff，你喜欢的屁股。
However, for a more easy acces, this is the link of the woff file.
但是，为了更容易访问，这是 woff 文件的链接。
http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff
http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff
回答by Paul 501
I ended up switching to Font-Awesome Icons. They are just as good if not better, and all you need to do is link in the font, happy days.
我最终切换到 Font-Awesome Icons。如果不是更好，它们也一样好，您需要做的就是在字体中链接，快乐的日子。
回答by Newbie
make sure the name of the folder that contains the font name is "fonts" not "font"
确保包含字体名称的文件夹的名称是“fonts”而不是“font”
回答by AzizAhmad
you can use tag like this:
你可以使用这样的标签：
<i class="fa fa-edit"></i>
回答by 538ROMEO
Just in case :
以防万一 ：
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..
例如，我刚试过<span class="icones glyphicon glyphicon-pen">，一小时后我意识到这个图标没有包含在引导包中！！虽然信封图标工作正常..
Hope this helps
希望这可以帮助
