Geek Answers Handbook

Remove glyphicon from bootstrap

How to remove all instances of glyphics from bootstrap 3? It looks like it is heavily embedded in the .css file :(

I am trying to keep the minimum file size.

+5
source share
3 answers

I am going to assume that you are not creating Bootstrap with the LESS or SASS codebase and loading the entire library you created. If so, go to the Bootstrap settings page and uncheck any components you don’t want, that is, using Glyphicons, and then download a new source.

Many online font library tools, I like to use Fontello myself, letting you select only the icons you need and create an icon font from this. They not only create the font of the icon, but also allow CSS to include the font in 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 just include the CSS font in the main CSS stylesheet. If you have additional questions about including / inserting the font of the icon, I would google "How to enable the font icon . "

+6
source

Just scan 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";
+7
source

You can configure the download before downloading to remove unnecessary components.

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

+3
source

More articles:


All Articles