Question

我有这个HTML页面：

 <link rel="shortcut icon" type="image/png" href="{% static "images/favicon.ico" %}"/>
      <link rel="stylesheet" type="text/css"  href="{% static "css/bootstrap.css" %}">
      <link rel="stylesheet" type="text/css"  href="{% static "css/bootstrap-theme.css" %}">
      <link rel="stylesheet" type="text/css"  href="{% static "fonts/font-awesome.min.css" %}">
      <link rel="stylesheet" type="text/css"  href="{% static "css/custom.css" %}" media="screen">

    <script src="{% static "js/jquery.min.js" %}"></script>
    <script src="{% static "js/bootstrap.min.js" %}"></script>
    <script type="text/javascript" src="{% static "js/added.js" %}"></script>
[...]
 <i class="glyphicon glyphicon-thumbs-up" id="like" name="{{post.id}}"> </i>

尽管所有的css文件都已加载且bootstrap css呈现正常，但不会在Chrome和Firefox上显示竖起大拇指图标。

我在SO上查看了simillar问题，但找不到我的答案。非常感谢您的帮助。

Answer 1

字体文件未正确加载。检查文件是否在预期位置。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

如果这不起作用，我建议您重新下载引导程序文件，并确保所有文件都以正确的路径复制。

Bootstrap字形不显示

1 个答案: