Remove Glyphicons from Bootstrap

Question

How can I remove all instances of glyphicons from the bootstrap 3? It looks like it's heavily embedded into the .css file :(

I'm trying to keep the file size minimum as possible.

Answer 1

I'm going to assume that you're not building Bootstrap with the LESS or SASS code base and are downloading the whole library pre-built. If so, go to Bootstrap's customize page and uncheck any components that you don't want, i.e. Glyphicons, then download the new source.

A lot of the online font library tools, I like to use Fontello myself, will allow you to select just the icons you want and create an icon font from that. Not only do they create the icon font but will also provide the CSS to include the font into your project, it will look something like this:

@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.woff2') format('woff2'),
       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');
}

// Catchall baseclass
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Individual icons
.glyphicon-asterisk               { &:before { content: "\2a"; } }
.glyphicon-plus                   { &:before { content: "\2b"; } }
/* ... more icons ... */
/* ... more icons ... */
/* ... more icons ... */
.glyphicon-menu-down              { &:before { content: "\e259"; } }
.glyphicon-menu-up                { &:before { content: "\e260"; } }

Now simply include the font CSS into your main CSS stylesheet. If you have any additional questions about including/embedding an icon font I would Google "How to include font icon".

Answer 2

Just simply clone bootstrap from https://github.com/twbs/bootstrap-sass and comment out @import "bootstrap/glyphicons"; from _bootstrap.scss

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
//@import "bootstrap/glyphicons";

Answer 3

You can customise bootstrap before downloading it to remove unnecessary components.

Go to http://getbootstrap.com/customize/, and untick the Glyphicons component.