moo*_*law 46 html css directory twitter-bootstrap-3
我之前没有使用任何引导框架.我想在我的页面上包含bootstrap 3中的一些glyphicons.根据我的理解,他们应该包含在我已添加到我的页面的bootstrap.css文件中.当我查看bootstrap.css文件但是我没有看到任何对它们的引用？虽然它是一个大文件,但我可能错过了一些东西.
我注意到当我打开dist从bootstrap 3下载的 文件夹时,有一个单独的文件夹fonts,其中包含名为的文件:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
看起来像这是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>
jmb*_*cci 95
我认为您的特殊问题不是如何使用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">
取决于您的服务器结构或您的目的.
第一个和第二个是相对于文件的当前目录.第二个更明确地说"here"(./)然后是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和THEN加载字体文件.
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设置特定图像.