Menu
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> 
646
Bootstrap 3 Glyphicons are actually fonts, so you can scale them and color them as you please. Bootstrap previously used image sprites for icons. To add a glyphicon, add a <span> tag with Bootstrap's . glyphicon class and also the class for the specific glyphicon that you require.
Free Alternatives to Glyphicons You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons.
Where to find Glyphicons? Associated CSS rules are present within bootstrap. css and bootstrap-min. css files within css folder of dist folder.
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 its files in its download ZIP.
You then include your Bootstrap file like so:
<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 file's 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 than looking for a /fonts folder.
So, let's say the 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 anything 'special' to load Bootstrap Glyphicons, except make sure your folder structure is set up appropriately.
When you get that fixed, your HTML should simply 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.
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
