首页 文章

Bootstrap 3无法正确显示glyphicon

提问于
浏览 次
55

我正在从bootstrap 2.3迁移到bootstrap 3，一切运行良好 . 但是当我尝试添加一些图标时，图标字体无法正常显示 . 我试图在这里查看http://bootply.com/61521并且只显示'.glyphicon-envelope' . 其他人显示如'E001'等 .

我怎样才能解决这个问题？

对于其他浏览器，glyphicons正确显示，只有firefox无法正确显示它 .

css3 twitter-bootstrap-3 glyphicons

14 回答

  • 40

    好的，上面没有回答我的问题 . 我有与bootstrap css和js文件夹相同位置的fonts文件夹（例如/ theme / bootstrap3 / ..），但是它在根目录中寻找字体文件夹（例如/ fonts / glyph .. .woff）

    我的解决方案是将@ icon-font-path变量设置为正确的相对路径：

    例如@ icon-font-path：“fonts /”;

    回复于
  • 3

    您是否选择了Bootstrap的自定义版本？存在一个问题，即自定义包中包含的字体文件已损坏（请参阅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），希望它有所帮助 .

    回复于
  • 29

    图标和CSS现在从引导程序中分离出来 . 这是一个来自另一个stackoverflow答案的小提琴

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

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

    Bootstrap 3 Glyphicons CDN

    回复于
  • 78

    这是对我有用的修复方法 . Firefox有一个文件原始策略导致此问题 . 要修复，请执行以下步骤：

    • 在firefox中打开about：config

    • 查找security.fileuri.strict_origin_policy属性并将其从“true”更改为“false” .

    • Voial！你已准备好出发！

    详情：http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts

    使用file：/// protocol访问文件时，您只会看到此问题

    回复于
  • -1

    我使用本地Apache服务器遇到了同样的问题 . 这解决了我的问题：

    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>
    回复于
  • 5

    首先，我尝试使用zip文件以“官方”方式安装glyphicons字体 . 我不能这样做 .

    这是我的逐步解决方案：

    • 转到Bootstrap的网页，然后转到"Components"部分 .

    • 打开浏览器控制台 . 在Chrome中，按Ctrl Shift C.

    • 在参考资料部分，在Frames / getbootstrap.com / Fonts中，您将找到实际运行glyphicons的字体 . 建议使用私有模式来逃避缓存 .

    • 使用字体文件的URL（右键单击资源列表中显示的文件），将其复制到新选项卡中，然后按Enter . 这将下载字体文件 .

    • 再次复制选项卡中的URL并将字体扩展名更改为eot，ttf，svg或woff，嗨 .

    但是，为了更容易访问，这是woff文件的链接 .

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

    回复于
  • 0

    我最终切换到Font-Awesome Icons . 如果不是更好的话，它们也同样好，你需要做的就是链接字体，快乐的日子 .

    回复于
  • 2

    确保包含字体名称的文件夹的名称是“fonts”而不是“font”

    回复于
  • 0

    你可以使用这样的标签：

    <i class="fa fa-edit"></i>
    回复于
  • 6

    以防万一 ：

    例如，我只是尝试了 <span class="icones glyphicon glyphicon-pen"> ，一小时后我意识到这个图标没有包含在bootstrap包中！虽然enveloppe图标工作正常..

    希望这可以帮助

    回复于
  • 1

    正如其他人所说，定制器存在一些问题 .

    我遇到了没有显示字形的麻烦，以及导航栏布局的问题 .

    我使用了建议并从完整的zip上传了字体/覆盖了自定义版本中的字体并修复了图标问题 .

    我还从CDN中提取了CDN CSS和javascript而不是我的本地副本 . 这解决了我的导航栏问题 .

    所以我建议，直到你掌握Bootstrap，不要使用自定义版本，因为你可能会得到一些令人沮丧，不必要的结果 .

    回复于
  • 0

    对我来说，按照bootstrap.css中指定的位置放置我的 fonts 文件夹解决了这个问题

    它的 fonts 文件夹大多位于bootstrap.css文件的父目录中 .

    我遇到了这个问题，并研究了很多答案，如果还有人在2015年面临这个问题，那么它要么是CSS问题，要么是文件的位置不匹配 .

    这个bug已经通过bootstrap解决了

    回复于
  • 1

    这是支持上述答案的官方文档 .

    更改图标字体位置Bootstrap假设图标字体文件将位于../fonts/目录，相对于已编译的CSS文件 . 移动或重命名这些字体文件意味着以下三种方式之一更新CSS：更改源Less文件中的@ icon-font-path和/或@ icon-font-name变量 . 利用Less编译器提供的相对URL选项 . 更改已编译CSS中的url（）路径 . 使用最适合您特定开发设置的选项 .

    除了这个错误之外，新用户会在从官方网站下载引导拉链后做 . 他们倾向于跳过fonts文件夹以便在他们的开发设置中进行复制 . So missing fonts folder can also lead to this problem

    回复于
  • 11

    • 尝试使用CDN

    • 尝试设置Access-Control-Allow-Origin HTTP标头

    回复于

相关问题