46

我以前没有使用过任何引导框架。我想在我的页面上的 bootstrap 3 中包含一些字形图标。据我了解，它们应该包含在我添加到页面的 bootstrap.css 文件中。当我查看 bootstrap.css 文件时，我没有看到对它们的任何引用？虽然它是一个大文件，但我可能错过了一些东西。

我注意到，当我打开 dist从 bootstrap 3 下载的文件夹时，有一个单独的文件夹fonts，其中包含名为：

glyphicons-halflings-regular.eot 
glyphicons-halflings-regular.svg 
glyphicons-halflings-regular.ttf 
glyphicons-halflings-regular.woff

看起来这就是字形图标所在的地方，但是我不知道如何将它们附加到我的网站上？如何将字形图标附加到我的页面？

感谢您提前提供任何帮助

下面的代码显示了附加的 bootstrap.css 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap example</title>
    <meta name="viewport" content="width=divice-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet" media="screen">
 </head>

这是html显示字形图标应该在哪里的代码部分：

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>
           Home</a></li>    
          <li><a href="#"><span class="glyphicon glyphicon-star"></span> Top
           Destinations</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span    
            class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>
4

1 回答 1

98

我认为您的特殊问题不是如何使用 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 here
index.html

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

然后你像这样包含你的引导文件：

<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 文件位于同一位置，如下所示：

/fonts
Bootstrap.css
index.html

CSS 文件比查找/fonts文件夹要深一层。

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

C:\www\fonts
C:\www\Boostrap.css
C:\www\index.html

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

C:\fonts

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

C:\www\fonts

所以看看这是否有帮助。您无需执行任何“特殊”操作即可加载 Bootstrap Glyphicons，除非确保您的文件夹结构设置正确。

当你得到修复时，你的 HTML 应该是：

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

请注意，您需要这两个课程。第一类glyphicon设置基本样式，同时glyphicon-comment设置特定图像。

于 2013-10-26T16:41:38.410 回答