How to include Glyphicons without using Bootstrap CSS

Question

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!

Answer 1

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).