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

葛成济

2023-03-14

问题内容：

我以前没有使用过任何引导框架。我想在页面的bootstrap
3中包含一些glyphicons。据我了解，它们应该包含在我添加到页面的bootstrap.css文件中。当我查看bootstrap.css文件时，没有看到对它们的引用？尽管文件很大，我可能还是错过了一些东西。

我注意到，当我打开dist从引导程序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>

问题答案：

我认为您的特定问题不是如何使用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设置特定图像。

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

相关阅读

相关文章

相关问答

相关工具

相关文档