如何在引导程序中包含glyphicons 3

我以前没有使用任何bootstrap框架。我想在我的页面的引导程序3中包含一些glyphicons。根据我的理解，他们应该包含在我已添加到我的页面的bootstrap.css文件中。当我查看bootstrap.css文件但是我没有看到对它们的引用？虽然它的一个大文件我可能错过了一些东西。如何在引导程序中包含glyphicons 3

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

来源

2013-10-26 moonshineOutlaw

查看在哪里保存字体文件（http://getbootstrap.com/getting-started/#whats-included-precompiled）并阅读关于导入顺序（https://github.com/twbs/bootstrap- sass＃字体）帮助了我。 – Ryan

我认为你的特殊问题不是如何使用图形文件，而是了解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

如果你注意到，这也是它在它的下载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">

根据您的服务器结构，否则你会为了什么。

第一个和第二个是相对于您文件的当前目录。第二个更清楚的是先说“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-comment设置特定图像。

来源

2013-10-26 16:41:38 jmbertucci

我只想再添加一件。如果你有适当的文件结构，并且bootstrap仍然无法找到字体文件，并且你正在使用像Spring MVC这样的需要映射静态文件请求的框架，那么一定要更新这些映射。希望能救人20分钟... – Mac

如何在引导程序中包含glyphicons 3

回答

相关问题