如何在Bootstrap 3中使用Glyphicons

Question

如何在Bootstrap 3中使用Glyphicons

46

我以前没有使用过任何Bootstrap框架。我想在我的页面中包含一些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>

- moonshineOutlaw

1

通过查看字体文件的保存位置（http://getbootstrap.com/getting-started/#whats-included-precompiled）和阅读导入顺序的相关信息（https://github.com/twbs/bootstrap-sass#fonts），我得到了帮助。 - Ryan

1个回答

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

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

- jmbertucci · Accepted Answer

我认为你的问题不在于如何使用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文件中结构化其文件的方式。

然后您可以像这样包含您的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文件与此处相同位置:

/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则设置了特定的图像。