How to include Glyphicons without using Bootstrap CSS

html css twitter-bootstrap twitter-bootstrap-3 glyphicons

57,342

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

bower install glyphicons-only-bootstrap

EDIT

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

npm install glyphicons-only-bootstrap

Solution 2

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

Solution 3

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:

Download Font Awesome package;
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;
Include <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> in the <head>of your HTML;
Choose icons from the icon library and put them into your app just as you would Bootstrap's glyphicons.

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! :)

View more solutions

57,342

Author by

Raja

Senior Front-End UI Developer with 14+ years of experience in Full-Stack web application development with LAMP Environment, Angular 6+, PHP (V 7.1 & 5.6), Angular 6+, Type Script, SQL (generic SQL, MySQL, Oracle), Perl, Oracle, MongoDB, HTML5, XHTML, CSS, JavaScript (generic JS, jQuery, Ajax, cross-domain Ajax), Bootstrap, REST API, XML and JSON. Also, I have strong knowledge background in project management which includes Requirement gathering and analysis, Estimation, Design, Development, Code review, Testing and coordinating with stakeholders and off-shore team. Passionately work towards enhancing project knowledge of self and the team. Able to perform as an amicable team player as well as individual contributor. Client coordination and working closely with the project team (DEV and QA).

Updated on July 05, 2022

Comments

Raja almost 2 years

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!