How to include Glyphicons without using Bootstrap CSS

How to include Glyphicons without using Bootstrap CSS

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!

Solutions/Answers:

Solution 1:

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

Related:  Bootstrap popover, image as content

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

npm install glyphicons-only-bootstrap

Solution 2:

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.

Solution 3:

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:

Related:  Bootstrap control with multiple “data-toggle”
<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).

Solution 4:

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

Solution 5:

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! 🙂

Solution 6:

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

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

Related:  How to resize Twitter Bootstrap modal dynamically based on the content

References