logo标签列表

Bootstrap 3无法正确显示glyphicon。

csstwitter-bootstrap-3glyphicons
57
我正在从Bootstrap 2.3迁移到Bootstrap 3，一切都运作良好。但是当我尝试添加一些图标时，图标字体无法正确显示。我尝试查看 http://bootply.com/61521 ，只有“ .glyphicon-envelope” 能够正确显示。其他的都显示为“E001”等等。
如何解决这个问题？对于其他浏览器，Glyphicons 可以正常显示，只有火狐浏览器不能正确显示它。
字形图标的CSS已经自动包含在Bootply中。 - Carol Skelly
https://dev59.com/13E85IYBdhLWcg3wShWf - ecabuk
https://dev59.com/OmMl5IYBdhLWcg3we283#31522226 - Jo Smo
可能是Bootstrap 3 Glyphicons不起作用的重复问题。 - Mogsdad
14个回答
80

您选择了自定义版本的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），希望能有所帮助。

1
我已经尝试了很多次，但还是无法解决。Chrome开发工具显示301永久重定向错误，但我无法弄清楚如何修复它！ - DKhanal
2
我没有自定义我的下载，但我仍然遇到了这个问题。按照建议从CDN下载文件解决了这个问题。谢谢。 - nixon
我在使用通过bower安装的BS 3.3.2时遇到了这个问题。字体文件正在加载，并且与从getbootstrap.com直接下载的非自定义zip文件完全相同。 - Jay K
只有当我用CDN替换bootstrap.min.css文件中的../fonts/... URL时才能正常工作，而当我下载并替换文件时则无法正常工作。 - KateMak
40
4
我不想使用CDN，因为我大部分时间都是离线工作。 - iSa
@Ivan，你可以直接将CSS下载到你的服务器上，而不必使用CDN。当然，你只需要用自己的URL替换CDN的URL即可。 - Anton
我已经尝试过了，但从未成功。使用CDN可以正常工作，但当我尝试用自己的URL替换CSS文件所在的位置时，它就无法工作了。只有“glyphicon-envelope”能够正确显示。-_- 我想我可能是漏掉了什么。 - iSa
@iSa 您需要下载资源（url 中的所有内容，主要是字体文件），仅仅下载 CSS 是不够的。 - losnir
是的，我知道。其他浏览器都可以正常工作，但是Mozilla Firefox 21不能。 - iSa
非常感谢！由于某些原因，我的Bootstrap模板中没有包含Glyphicons...添加这个对我有用。 - William
29

好的，我的问题没有被上面的回答解决。我将字体文件夹放在与bootstrap css和js文件夹相同的位置(例如/theme/bootstrap3/..)，但它正在寻找根目录中的字体文件夹(例如/fonts/glyph.. .woff)

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

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

4
bootstrap.min.css 不应该在文档根目录中寻找字体文件（这会破坏许多应用程序），而是相对于自己在 ../fonts 中查找：url(../fonts/glyphicons-halflings-regular.ttf)。因此，请勿更改原始目录结构（fonts/，css/，js/）。 - basic6
你好 @brad，我遇到了同样的问题。我的文件位于css/bootstrap/bootstrap.min.css中，在Android设备上显示的图标是中文字符，而在iOS上显示的是其他图标。我应该做哪些更改才能使其正常工作？ - Swift
现在应该在哪里添加相对路径？字体文件链接在哪里？ - Swift
11

以下方法适用于解决我遇到的问题。Firefox浏览器采用了一种文件源策略，导致出现这种问题。要修复此问题，请按照以下步骤操作：

  1. 在Firefox中打开“about:config”
  2. 查找“security.fileuri.strict_origin_policy”属性，并将其从“true”更改为“false”。
  3. 完成！您现在可以继续使用了！

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

只有在使用“file:///”协议访问文件时才会出现此问题。

6

我使用本地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>
你可以分享一下在CORS方面的做法，让Amazon S3可以正常使用字体吗？我正在网上搜索关于Amazon S3字体问题的相关信息。 - Cassiano
嗨Cassiano，我添加了我的配置。祝你好运！ - robodo
5
首先，我尝试用 "官方" 的方式通过 zip 文件安装字形图标字体，但是失败了。
以下是我的逐步解决方案:
  1. 进入 Bootstrap 网站并转到 "Components" 部分。
  2. 打开浏览器控制台。在 Chrome 中，按 Ctrl + Shift + C。
  3. 在资源部分中，位于 Frames/getbootstrap.com/Fonts 内，您将找到实际运行字形图标的字体。建议使用隐私模式以避免缓存。
  4. 使用字体文件的 URL（在资源列表中右键单击文件），复制它到一个新标签页中，然后按 ENTER。这将下载字体文件。
  5. 再次将网址复制到标签页中，并将字体扩展名更改为 eot、ttf、svg 或 woff，根据您的喜好来选择。
但是，为了更方便地访问，这是 WOFF 文件的链接。 http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff
3
我最终转向使用Font-Awesome图标。它们与其他图标一样好甚至更好，你只需要链接字体，就可以愉快地使用了。
2

请确保包含字体名称的文件夹名称为"fonts"而不是"font"

1

提醒一下：

比如说，我试了一下<span class="icones glyphicon glyphicon-pen">，但是一个小时后发现这个图标并不包含在Bootstrap包中！！ 而信封图标运作正常。

希望这能有所帮助。

1
你可以像这样使用标签：

你的文本内容

<i class="fa fa-edit"></i>
FA图标不能以这种方式使用。请在回答中明确清晰，不要为了回答而回答。 - Mohammed mansoor
无关。答案是关于glyphicons，而不是fa-icons。如果您想提到<i>标签，请明确说明，并在示例中使用它与glyphicon。 - Prasad De Silva
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接