How to include Glyphicons without using Bootstrap CSS

19
votes

My Client project using some basic HTML and CSS. But they like the Glyphicons on the Website menus. So i just tried to include Glyphicons with the Bootstrap CSS, it does, but the other css got affected after including the Bootstrap CSS.

So the question may be silly, I just want to include Glyphicons in client website menu links without bootstrap css.

Is that possible first? I know Glyphicons free will be available with Bootstrap Package.

And other things is that my client do not want me to include Bootstrap CSS since it is affecting page structure.

So is it possible to include Glyphicons without Bootstrap css or my own custom css?

Any help would be appreciated!

6
htmlcsstwitter-bootstraptwitter-bootstrap-3glyphicons
Alternative; Font Awesone - HddnTHA
You will have to buy the PRO version if you want to use it without bootstrap. - AndrewL64
Definitely switch to fontawesome.io - Jeff Puckett
As far as I understand, using Glyphicons without Bootstrap is copyright infringement. Please don't do this, use a free alternative like Font Awesome instead. "Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible." - getbootstrap.com/components/#glyphicons - Nick McCurdy
Your question isn't silly; the way so many devs let Bootstrap wreak havoc on standard CSS is what's silly! There's a library I want to use that requires Glyphicons, but I don't want Bootstrap making my CSS FUBAR. It'd be better of Bootstrap only kicked in on elements with a particular class and their descendants, and I don't understand why this isn't the way Bootstrap works. (Just add the class to your <html> element if you really want it to take over everything!) Maybe I'm just old—I've been using CSS for 20 years, and while I've kept up, I just still expect CSS3 to work a certain way. - Michael Scheper

6 Answers

11
votes

Here is a bower package that you can use only glyphicons out of entire bootstrap.

Check this github repository https://github.com/ohpyupi/glyphicons-only-bootstrap

or

bower install glyphicons-only-bootstrap

EDIT

Now it's possible to download the package through NPM.

npm install glyphicons-only-bootstrap
15
votes

There's this:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

However, if you want to conserve some bandwidth, you can load the fonts directly from a CDN and then inline the required CSS, like this:

<style>
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
}
/* Add icons you will be using below */
.glyphicon-fire:before {
  content: '\e104';
}
.glyphicon-eye-open:before {
  content: '\e105';
}
</style>

You can see an example in the demo here ("Eye of Medusa" and "Rain of Fire" menu items).

13
votes

I was trying to get Bootstrap's glyphicons to work without installing the whole bootstrap.css file, but half way through it became too much work and I gave up. Instead, I came across Font Awesome. Bootstrap 3 itself uses it (or used to use). It is designed to be used as a standalone so it's really simple and light. All you have to do is:

  1. Download Font Awesome package;

  2. Copy font-awesome.min.css into your css folder and all of the fonts files from Font Awesome's fonts folder into your fonts folder;

  3. Include <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> in the <head>of your HTML;

  4. Choose icons from the icon library and put them into your app just as you would Bootstrap's glyphicons.

1
votes

Yes, you only need download from this page: http://glyphicons.com/ (Free option below)

EDIT: In this thread more info about this: Bootstrap 3 Glyphicons CDN

1
votes

I had the same problem with Bootstraps, I just need an arrow but mess it up when added it.

So I moved to FontAwesome, worked beautifully!

You can also get the CDN that looks like this:

<script src="https://use.fontawesome.com/2734t3et304.js"></script>

You need to get your own! :)

1
votes

go to glyphicons cheatsheet [https://glyphicons.bootstrapcheatsheets.com/]

li:before {
font-family: "Glyphicons Halflings";
content: "\e013";
/* other code as per need*/
}