如何在引导程序3中包含字形图标

如何在引导程序3中包含字形图标

我认为您的特定问题不是如何使用Glyphicons，而是了解Bootstrap文件如何协同工作。

Bootstrap 需要 特定的文件结构才能工作。我从您的代码中看到了：

<link href="bootstrap.css" rel="stylesheet" media="screen">

您的Bootstrap.css是从与页面相同的位置加载的，如果您不调整文件结构，则会造成问题。

但首先，让我建议您像这样设置文件夹结构：

/css      <-- Bootstrap.css here/fonts    <-- Bootstrap fonts here/img/js       <-- Bootstrap Javascript hereindex.html

如果您注意到，这也是Bootstrap在其下载ZIP中构造其文件的方式。

然后，按如下所示包含您的Bootstrap文件：

<link href="css/bootstrap.css" rel="stylesheet" media="screen">or<link href="./css/bootstrap.css" rel="stylesheet" media="screen">or<link href="/css/bootstrap.css" rel="stylesheet" media="screen">

取决于您的服务器结构或要使用的功能。

第一个和第二个相对于文件的当前目录。第二个更加明确，首先说“这里”（./），然后说css文件夹（/ css）。

如果您正在运行Web服务器，那么第三种方法很好，并且您可以只使用相对于根符号的格式，因为前导“ /”将始终从根文件夹开始。

那么，为什么呢？

Bootstrap.css具有Glyphfonts的以下特定行：

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

您会看到，Glyphfonts是通过以下方式加载的：转到一个目录

../

，然后查找一个名为的文件夹

/fonts

， 然后 加载字体文件。

URL地址相对于CSS文件的位置。因此，如果您的CSS文件位于以下相同位置：

/fontsBootstrap.cssindex.html

CSS文件比寻找

/fonts

文件夹要深入一层。

因此，假设这些文件的实际位置是：

C:wwwfontsC:wwwBoostrap.cssC:wwwindex.html

从技术上讲，CSS文件将在以下位置寻找文件夹：

C:fonts

但您的文件夹实际上位于：

C:wwwfonts

因此，看看是否有帮助。您无需执行任何“特殊” *** 作即可加载Bootstrap Glyphicons，只需确保适当设置了文件夹结构即可。

解决该问题后，您的HTML应该只是：

<span ></span>

注意，您需要 两个 类。第一类

glyphicon

设置基本样式，同时

glyphicon-comment

设置特定图像。