Remove Glyphicons from Bootstrap

问题:

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.

回答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".

回答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";

回答3:

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

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