Bootstrap 3无法正确显示graphics
我从bootstrap 2.3迁移到bootstrap 3，一切正常。 但是当我试图添加一些图标时，图标字体不能正确显示。 我试图看看这里http://bootply.com/61521 ，只有'。glyphicon-envelope'正在正确显示。 其他人则显示如“E001”等。
我怎样才能解决这个问题？
对于其他浏览器，glyphicons显示正常，只有firefox无法正确显示。
好的，我的问题没有被上面的答复。 我把字体文件夹放在与bootstrap css和js文件夹（例如/ theme / bootstrap3 / ..）相同的位置，但是它正在寻找根目录中的字体文件夹（例如/ fonts / glyph .. .woff）
我的解决scheme是将@ icon-font-pathvariables设置为正确的相对path：
例如@ icon-font-path：“fonts /”;
你select了Bootstrap的定制版本吗？ 包含在定制软件包中的字体文件有问题（请参阅https://github.com/twbs/bootstrap/issues/9925 ）。 如果您不想使用CDN，则必须手动下载它们，并用下载的字体replace自己的字体：
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-regularEot
之后，尝试一个强大的重新加载（CTRL + F5），希望它有帮助。
图标和CSS现在是从bootstrap分开。 这里是从另一个stackoverflow答案小提琴
@import url("bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
Bootstrap 3 Glyphicons CDN
这是为我工作的修复程序。 Firefox有一个导致这个问题的文件来源策略。 要修复，请执行以下步骤：
- 在Firefox中打开about：config
- findsecurity.fileuri.strict_origin_policy属性并将其从“true”更改为“false”。
- Voial！ 你已准备好出发！
详情： http : //stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts
使用file：///协议访问文件时只会看到这个问题
我有使用本地apache服务器相同的问题。 这解决了我的问题：
http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons
对于Amazon S3，您需要编辑您的CORSconfiguration：
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration>
首先，我尝试用“官方”方式安装字形字体，并用zip文件。 我做不到。
这是我的一步一步的解决scheme：
- 转至Bootstrap的网页，然后进入“组件”部分。
- 打开浏览器控制台。 在Chrome中，按Ctrl + Shift + C。
- 在“资源”部分的“框架/ getbootstrap.com /字体”中，您将find实际运行glyphicons的字体。 build议使用私有模式来躲避caching。
- 使用字体文件的URL（右键单击资源列表中显示的文件），将其复制到新的选项卡中，然后按ENTER键。 这将下载字体文件。
- 在另一个选项卡中复制URL，并将字体扩展名更改为eot，ttf，svg或woff，你喜欢的屁股。
但是，对于更简单的访问，这是woff文件的链接。
http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff
我结束了切换到字体真棒图标。 他们同样好，如果不是更好的，你所要做的就是链接字体，快乐的日子。
确保包含字体名称的文件夹的名称是“字体”而不是“字体”
你可以使用这样的标签：
<i class="fa fa-edit"></i>
以防万一 ：
例如，我刚刚<span class="icones glyphicon glyphicon-pen"> ，一个小时后，我意识到这个图标不包括在bootstrap包中！ 虽然enveloppe图标工作正常..
希望这可以帮助
正如其他人已经指出，定制者有一些问题。
我遇到麻烦了，也没有显示graphics，以及导航栏布局的问题。
我使用了build议，并从完整的zip中上传了字体/覆盖了定制版本中的字体，并修复了图标问题。
我也把CDN的CSS和JavaScript，而不是从CDN的本地副本。 这解决了我的导航栏问题。
因此，我build议您不要使用自定义版本，因为您可能会得到一些令人沮丧的不需要的结果。
对于我放置我的字体文件夹按照bootstrap.css中指定的位置解决了问题
大多数情况下，它的字体文件夹应该位于bootstrap.css文件的父目录中。
我面临这个问题，并研究了许多答案，如果仍然在2015年的人面临这个问题，那么它的一个CSS问题，或文件的位置不匹配。
这个bug已经通过bootstrap解决了
这是支持上述答案的官方文档。
更改图标字体位置Bootstrap假定图标字体文件将位于../fonts/目录中，相对于已编译的CSS文件。 移动或重命名这些字体文件意味着通过以下三种方式之一更新CSS：在源文件Less文件中更改@ icon-font-path和/或@ icon-font-namevariables。 利用Less编译器提供的相对URL选项。 更改编译的CSS中的url（）path。 使用最适合您的特定开发设置的任何选项。
除了这个新用户会犯的一个错误是，从官方网站下载引导压缩文件之后。 他们往往会跳过在他们的开发设置复制的字体文件夹。 所以丢失的字体文件夹也可能导致这个问题
- 尝试使用CDN
- 尝试设置Access-Control-Allow-Origin HTTP Header
