如何在引导程序 3 中包含字形图标 [重复]答案

【问题标题】：how to include glyphicons in bootstrap 3 [duplicate]如何在引导程序 3 中包含字形图标 [重复]
【发布时间】：2013-11-05 16:41:00
【问题描述】：

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

我注意到，当我打开从 bootstrap 3 下载的 dist 文件夹时，有一个单独的文件夹 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>

【问题讨论】：

查看字体文件的保存位置 (getbootstrap.com/getting-started/#whats-included-precompiled) 并了解导入顺序 (github.com/twbs/bootstrap-sass#fonts) 帮助了我。

标签： html css twitter-bootstrap-3 directory

【解决方案1】：

我认为您的特殊问题不是如何使用 Glyphicons，而是了解 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)。

如果您正在运行网络服务器，第三个很好，您可以使用相对于根的符号，因为前导的“/”将始终从根文件夹开始。

那么，为什么要这样做？

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设置具体图片。

【讨论】：

我只想再添加一件事。如果您有正确的文件结构，并且引导程序仍然无法找到字体文件，并且您正在使用像 Spring MVC 这样的框架，需要对静态文件进行请求映射，请务必同时更新这些映射。希望可以为别人节省 20 分钟...