如何在bootstrap中包含glyphicons 3 [英] how to include glyphicons in bootstrap 3

查看：128
本文介绍了如何在bootstrap中包含glyphicons 3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我以前没有使用任何引导框架。我想包括一些字形在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示例< / title> 
< meta name =viewportcontent =width = divice-width，initial-scale = 1.0> 
<！ -  Bootstrap  - > 
< link href =bootstrap.css =stylesheetmedia =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> 
首页< / a>< / li> 
< li>< a href =＃>< span class =glyphicon glyphicon-star>< / span>热门
目的地< / a>< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>< span 
 class =glyphicon glyphicon-user>< / span&关于我们< b class =caret>< / b>< / a>


解决方案

我认为你的特定问题不是如何使用Glyphicons，但要了解Bootstrap文件如何协同工作。



Bootstrap 需要特定的文件结构才能工作。我从您的代码中看到了这样：

 < link href =bootstrap.css =stylesheetmedia = screen>

您的Bootstrap.css正从与您的页面相同的位置加载，



但是首先，建议您设置文件夹结构，如下所示：

  / css < -  Bootstrap.css here 
 / fonts<  -  Bootstrap fonts here 
 / img 
 / js< -  Bootstrap JavaScript here 
 index.html

如果你注意到，这也是如何Bootstrap结构



然后，您需要包含您的Bootstrap文件，例如：

 
 code>< link href =css / bootstrap.css =stylesheetmedia =screen> 
或
< link href =./ css / bootstrap.css =stylesheetmedia =screen> 
或
< link href =/ css / bootstrap.css =stylesheetmedia =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 和 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 
  pre> 
 
 
那么看看是否有帮助。 
 
 
 
当你得到这个固定的，你的HTML应该简单是：
 < span class =glyphicon glyphicon-comment>< / span> 
  
注意，您需要两个第一类 glyphicon 设置基本样式， glyphicon-comment 设置特定图像。
 
 
 
我希望能帮助你！
 
 
 
干杯
 
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. 



I have noticed that when I opened the  dist folder downloaded from bootstrap 3 there is a separate folder fonts that contains files named:
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:
<!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 html code showing where the glyphicons should be:
      <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>



 解决方案 
I think  your particular problem isn't how to use Glyphicons but understanding how Bootstrap files work together.



Bootstrap requires a specific file structure to work.  I see from your code you have this:
<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.



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 it's files in it's download ZIP.



You then include your Bootstrap file like such:
<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 files current directory.  The second one is just more explicit by saying "here" (./) first then css folder (/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.



So, why do this?



Bootstrap.css has this specific line for 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 /fonts and THEN loading the font file.



The URL address is relative to the location of the CSS file.  So, if your CSS file is at the same location like this:
/fonts
Bootstrap.css
index.html

The CSS file is going one level deeper then looking for a /fonts folder.



So, lets say your 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:
C:\fonts

but your folder is actually in:
C:\www\fonts

So see if that helps.  You don't have to do any 'special' to load Bootstrap Glyphicons, except make sure you folder structure is setup appropriately.



When you get that fixed, your HTML should simple be:
<span class="glyphicon glyphicon-comment"></span>

Note, you need both classes.  The first class glyphicon sets up the basic styles while glyphicon-comment sets the specific image.



I hope that helps!



Cheers


                        
这篇关于如何在bootstrap中包含glyphicons 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆