Question

注意：Font Awesome也在使用

我正在使用导航栏左上角网站品牌中设置的glyphicon - 文本内容为“城中最佳城堡”。问题似乎是没有加载glyphicons的web字体。相反，在塔图标应该在其中的位置可以看到一个小方块。塔图标应使用页面上显示的以下标记进行渲染：

<span class="glyphicon glyphicon-tower"></span>

http://www.bestcastlesintown.co.uk/prototype/test3.php#.UneSnRDylCj

我相信stylesheet.css中的CSS对于使用glyphicons是正确的：

@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');
}


.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

任何人都可以帮忙解决问题吗？

Answer 1

<span class="glyphicon glyphicon-tower"></span>

这是使用bootstrap 3.0.0 插入glyphicons的正确方法，但您使用的是bootstrap 2.3.2

The right way in bootstrap 2是：

<i class="icon-tower"></i>

正如zessx所述，此图标在bootstrap 2.3.2 中不可用。

Answer 2

tower glyphicon来自1.8 Glyphicon版本，在Bootstrap 2.3.2中不可用。

您可以查看into the doc以查看Bootstrap 2.3.2可用的glyphes，并查看没有tower glyphicon。

Answer 3

我遇到了同样的问题。下载整个 Bootstrap 3文件夹，并将字体文件替换为当前文件。我发现自定义下载中的字体文件由于某种原因已损坏。

http://getbootstrap.com/

在Bootstrap中使用CSS font-face规则加载glyphicons的问题

3 个答案: