如何在自举3中包含glyphicons
我以前没有使用任何引导框架。 我想在我的页面上的bootstrap 3中包含一些glyphicons。 根据我的理解，他们应该包含在我已经添加到我的页面的bootstrap.css文件中。 当我看了bootstrap.css文件，但是我没有看到任何对它们的引用？ 虽然它的一个大文件，我可能错过了一些东西。
我注意到，当我打开从bootstrap 3下载的dist文件夹时，有一个单独的文件夹fonts包含名为的文件：
glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff
看起来像这是glyphicons的地方，但我不知道如何将这些附加到我的网站？ 如何将glyphicons附加到我的页面？
提前感谢您的帮助
下面的代码显示了附加的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代码的部分显示glyphicons应该是：
<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正在从您的页面的相同位置加载，如果您未调整文件结构，则会产生问题。
但首先，让我build议你像这样设置你的文件夹结构：
/css <-- Bootstrap.css here /fonts <-- Bootstrap fonts here /img /js <-- Bootstrap JavaScript here index.html
如果您注意到，这也是Bootstrap如何在下载ZIP中构build它的文件。
然后包含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文件夹要/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设置特定图像。
