Replacing the standard Glyphicons Halflings with Glyphicons PRO in Bootstrap 3?

Question

I've bought the full Glyphicons PRO package and want to use it with Bootstrap 3.

However, I can't seem to find comprehensive documentation on how to do this. The Glyphicons site lacks a "How to use section" and an accompanying PDF isn't much help either - it was mentioning a glyphicons.css file that wasn't part of the download package...

Any help on how to make this replacement is much appreciated.

Answer 1

In your bootstrap folder is a fonts folder (mostly in the CSS folder) that contains the Glyphicons fonts.

Those need to be replaced with the pro version you have.

Next you need to point (if the fonts not having the same name) to your new fonts in the bootstrap CSS. This depends on what technology you are using.

But you have to search for:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('fonts/bootstrap/glyphicons-halflings-regular.eot');
  src: url('fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix') format("embedded-opentype"), url('fonts/bootstrap/glyphicons-halflings-regular.woff') format("woff"), url('fonts/bootstrap/glyphicons-halflings-regular.ttf') format("truetype"), url('fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format("svg");
}

and replace the font file names (or maybe location if you are placing them in another place)