Bootstrap Glyphicons 未显示在本地 URL 上

Posted 2023-03-03

【中文标题】Bootstrap Glyphicons 未显示在本地 URL 上

【英文标题】：Bootstrap Glyphicons Not Showing on Local URL

【发布时间】：2015-03-14 14:30:46

【问题描述】：

我是一名网页设计师，我的笔记本电脑空间有限，因此我无法在笔记本电脑中放置多个 bootstrap 副本。由于我在外面工作时无法访问 Internet，因此我根本无法在源代码中使用像 http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css 这样的 CDN 访问。

为了解决这个问题，因为我安装了 Apache/php（使用 Mac - Yosemite），所以我设置了一个虚拟主机来托管一些常见的库，例如我从各自网站下载的 jquery 和 bootstrap。源代码如下所示：

虽然 jquery 和 bootstrap.min.js 加载正常，但字形图标没有正确显示，而是小方块。是否缺少某些东西，或者我根本无法使用此方法？

【问题讨论】：

您是否在索引文件所在的位置设置了字体文件夹？如果是...您的字形图标在此文件中吗？

@JakeTaylor 不，我没有。这个想法是让虚拟主机像我使用完整的 CDN URL 一样工作。当我使用 MAXCDN 的完整 CDN 时，会出现字形图标。

对...所以您将文件托管在您的 PC 上，并且您将您的 html 定向到您 PC 上的 css 和 js 是否正确？抱歉...你的 mac

@JakeTaylor 是的，我将文件本地托管在我的电脑（或 Mac）上。经过进一步调查，我发现：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://cdn.dev/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff. This can be fixed by moving the resource to the same domain or enabling CORS. 所以我猜这可能是问题所在？

【参考方案1】：

Glyphicons 实际上是一个字体工具包。您看到的所有符号都不包含在 CSS 文件中，而是 CSS 文件将它们定向到一个名为“Fonts”的文件夹，该文件夹需要在设置索引文件的同一位置进行设置。然后需要从引导站点下载 Glyphicon 或“字体”并包含在从 http://getbootstrap.com/getting-started/ 下载的 zip 文件中。这些文件必须位于索引文件所在的 Font 文件夹中，以便它们显示。即使在 Maxcdn 站点上，他们也有一个包含 CSS 指向的字形图标的文件夹，以使它们正常工作。

【讨论】：

是的，字体文件夹和其余的引导文件都在我托管引导文件的目录中。