如何在引导程序 3 中包含字形图标 [重复]
Posted
技术标签:
【中文标题】如何在引导程序 3 中包含字形图标 [重复]【英文标题】：how to include glyphicons in bootstrap 3 [duplicate] 【发布时间】：2013-11-05 16:41:00 【问题描述】：我之前没有使用过任何引导框架。我想在我的页面上的 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>
【问题讨论】：
查看字体文件的保存位置 (getbootstrap.com/getting-started/#whats-included-precompiled) 并了解导入顺序 (github.com/twbs/bootstrap-sass#fonts) 帮助了我。 【参考方案1】：我认为您的特殊问题不是如何使用 Glyphicons，而是了解 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 中构建文件的方式。
然后你像这样包含你的引导文件：
<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)。
如果您正在运行网络服务器，第三个很好，您可以使用相对于根的符号，因为前导的“/”将始终从根文件夹开始。
那么，为什么要这样做？
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设置具体图片。
【讨论】：
我只想再添加一件事。如果您有正确的文件结构，并且引导程序仍然无法找到字体文件，并且您正在使用像 Spring MVC 这样的框架，需要对静态文件进行请求映射，请务必同时更新这些映射。希望可以为别人节省 20 分钟...以上是关于如何在引导程序 3 中包含字形图标 [重复]的主要内容，如果未能解决你的问题，请参考以下文章