Html 如何在引导程序 3 中包含字形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19608873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to include glyphicons in bootstrap 3
提问by moonshineOutlaw
I've not used any of the bootstrap frameworks before. I want to include some of the glyphicons in bootstrap 3 on my page. From what I understand they should be included in a bootstrap.css file which I've added to my page. When I've looked in the bootstrap.css file however I don't see any reference to them ? Although its a large file I may have missed something.
我以前没有使用过任何引导框架。我想在我的页面上包含 bootstrap 3 中的一些字形。据我所知，它们应该包含在我添加到我的页面的 bootstrap.css 文件中。当我查看 bootstrap.css 文件时，但我没有看到对它们的任何引用？虽然它是一个大文件，但我可能错过了一些东西。
I have noticed that when I opened the distfolder downloaded from bootstrap 3 there is a separate folder fontsthat contains files named:
我注意到当我打开dist从 bootstrap 3 下载的 文件夹时，有一个单独的文件夹fonts包含名为：
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
It Seems like this is where the glyphicons are however I don't know how to attach these to my site? How do I attach the glyphicons to my page ?
似乎这是字形的位置，但是我不知道如何将它们附加到我的网站？如何将字形附加到我的页面？
Thanks for any help in advance
感谢您提前提供任何帮助
The code below shows the attached bootstrap.css file:
下面的代码显示了附加的 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>
and here is the part of the htmlcode showing where the glyphicons should be:
这是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>
回答by jmbertucci
I think your particular problem isn't how to use Glyphicons but understanding how Bootstrap files work together.
我认为您的特殊问题不是如何使用 Glyphicons，而是了解 Bootstrap 文件如何协同工作。
Bootstrap requiresa specific file structure to work. I see from your code you have this:
Bootstrap需要特定的文件结构才能工作。我从你的代码中看到你有这个：
<link href="bootstrap.css" rel="stylesheet" media="screen">
Your Bootstrap.css is being loaded from the same location as your page, this would create a problem if you didn't adjust your file structure.
您的 Bootstrap.css 是从与您的页面相同的位置加载的，如果您没有调整文件结构，这会产生问题。
But first, let me recommend you setup your folder structure like so:
但首先，让我建议您像这样设置文件夹结构：
/css <-- Bootstrap.css here
/fonts <-- Bootstrap fonts here
/img
/js <-- Bootstrap JavaScript here
index.html
If you notice, this is also how Bootstrap structures its files in its download ZIP.
如果您注意到，这也是 Bootstrap 在其下载 ZIP 中构建其文件的方式。
You then include your Bootstrap file like so:
然后，您可以像这样包含 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">
Depending on your server structure or what you're going for.
取决于您的服务器结构或您要做什么。
The first and second are relative to your file's current directory. The second one is just more explicit by saying "here" (./) first then css folder (/css).
第一个和第二个相对于文件的当前目录。第二个更明确，先说“这里”（./），然后是 css 文件夹（/css）。
The third is good if you're running a web server, and you can just use relative to root notation as the leading "/" will be always start at the root folder.
如果您正在运行 Web 服务器，则第三个很好，您可以使用相对于根符号，因为前导“/”将始终从根文件夹开始。
So, why do this?
那么，为什么要这样做呢？
Bootstrap.css has this specific line for Glyphfonts:
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');
}
What you can see is that that Glyphfonts are loaded by going up one directory ../and then looking for a folder called /fontsand THENloading the font file.
你能看到的是，这Glyphfonts被往上走一个目录加载../，然后寻找一个文件夹，名为/fonts和THEN加载字体文件。
The URL address is relative to the location of the CSS file. So, if your CSS file is at the same location like this:
URL 地址相对于 CSS 文件的位置。因此，如果您的 CSS 文件位于相同的位置，如下所示：
/fonts
Bootstrap.css
index.html
The CSS file is going one level deeper than looking for a /fontsfolder.
CSS 文件比查找/fonts文件夹更深一层。
So, let's say the actual location of these files are:
所以，假设这些文件的实际位置是：
C:\www\fonts
C:\www\Boostrap.css
C:\www\index.html
The CSS file would technically be looking for a folder at:
从技术上讲，CSS 文件将在以下位置查找文件夹：
C:\fonts
but your folder is actually in:
但您的文件夹实际上在：
C:\www\fonts
So see if that helps. You don't have to do anything 'special' to load Bootstrap Glyphicons, except make sure your folder structure is set up appropriately.
所以看看这是否有帮助。您无需执行任何“特殊”操作即可加载 Bootstrap Glyphicons，除非确保您的文件夹结构设置正确。
When you get that fixed, your HTML should simply be:
当你解决这个问题时，你的 HTML 应该只是：
<span class="glyphicon glyphicon-comment"></span>
Note, you need bothclasses. The first class glyphiconsets up the basic styles while glyphicon-commentsets the specific image.
请注意，您需要两个类。第一类glyphicon设置基本样式，同时glyphicon-comment设置特定图像。
