Question

这看起来与此相似：

但我不知道这个问题是什么，我试过谷歌搜索一切。我相信它是在我第一次尝试bootstrap时开始的。我已经读到这是字体被破坏所以我从网站上重新下载并且没有工作..

如果你正在制作一个项目，所有其他解决方案似乎都是......但我的每一个都在发生。我认为这是乱画的字形，但我可以看到这些都很好：

但肯定有一些东西没有正确呈现。请帮忙！

编辑：我没有网站，它只是在网络上使用bootstrap的网站（我认为），有些字体（？）没有渲染，我只看到一个方盒子。我将问题与引导程序联系起来，因为它只是在我开始为某些Web项目搞乱它时才开始发生。

Answer 1

Bootstrap假设图标字体文件将位于../fonts/   目录，相对于已编译的CSS文件。移动或重命名   这些字体文件意味着以三种方式之一更新CSS：

更改中的@ icon-font-path和/或@ icon-font-name变量   来源较少的文件。利用提供的相对URL选项   少编译器。更改已编译CSS中的url（）路径。

确保图标的路径位于正确的目录中。

还要确保使用aria-hidden属性定义它们。

辅助技术的现代版本将宣布生成CSS 内容，以及特定的Unicode字符。为了避免意外并且在屏幕阅读器中混淆输出（特别是当图标是纯粹用于装饰），我们用aria-hidden =“true”隐藏它们属性。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

您可以提供指向您网站的链接，这样我就可以确切地看到发生了什么？

Answer 2

检查 Less 文件中的glyphicons.less并查看来源：

// Import the fonts
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('@{icon-font-path}@{icon-font-name}.eot');
  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
       url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
       url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
       url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
       url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
}

如果您将字体放在与字形相同的位置，则可以使用字体名称更改@{icon-font-name}。

这是一个例子：

src:url('@{icon-font-path}myfont.eot');

Bootstrap图标呈现为我所有浏览器上的空盒子

2 个答案: