Bootstrap字体图标在本地URL上无法显示

Question

Bootstrap字体图标在本地URL上无法显示

3

我是一名网页设计师，我的笔记本电脑空间有限，因此我没有多个Bootstrap的副本。由于我在户外工作时没有互联网访问权，所以我无法像这样使用CDN访问http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css来编写源代码。

为了解决这个问题，因为我已经安装了Apache/PHP（使用Mac - Yosemite），我设置了一个虚拟主机来托管一些常见库，如jquery和bootstrap，我从它们各自的网站上下载。源代码看起来像这样：

<link href="http://cdn.dev/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://cdn.dev/bootstrap/3.3.1/css/bootstrap.min.js"></script>

虽然jquery和bootstrap.min.js可以正常加载，但是字形图标显示不正确，而是显示为小方框。是否有缺少的东西或者我根本不能使用这种方法？

- ddz1507

你是否已经在索引文件所在的文件夹中设置了字体文件夹？如果是的话... 你的字形图标是否在这个文件夹中？ - Jake Taylor

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

你是在你的电脑上托管文件，并将你的 HTML 指向你电脑上的 CSS 和 JS，对吗？抱歉，你的 Mac。 - Jake Taylor

@JakeTaylor 是的，我将文件本地托管在我的电脑（或Mac）上。经过进一步调查，我发现了这个问题：

跨域请求被阻止：同源策略不允许读取远程资源 http://cdn.dev/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff。可以通过将资源移动到相同的域或启用CORS来解决此问题。

所以我猜这可能是问题的原因？ - ddz1507

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jake Taylor · Accepted Answer

Glyphicons实际上是一个字体套件。您所看到的所有符号都不包含在CSS文件中，而是CSS文件将它们指向一个名为“Fonts”的文件夹，该文件夹需要设置在与Index文件相同的位置。然后需要从bootstrap网站下载Glyphicons或“字体”，并将其包含在从http://getbootstrap.com/getting-started/下载的zip文件中。这些文件必须位于Font文件夹中，该文件夹位于您的index文件所在的位置，以便它们显示出来。即使在Maxcdn网站上，他们也有一个带有glyphicons的文件夹，CSS会指向该文件夹以使其正常工作。