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

Answer 1

As mentioned in some comments above, they are differences in the bootstrap FREE version of Glyphicons compared to the one from the Glyphicons PRO package.

As a recap, here as the main differences:

• [difference] : [Bootstrap's Glyphicons FREE] VS [Glyphicons PRO]
• icon font name : "glyphicons-halflings-regular" VS "glyphicons-regular"
• css class names : "glyphicon" , "glyphicon-"* VS "glyphicons" , "glyphicons-"*
• font family : "Glyphicons Halflings" VS "Glyphicons Regular"

Given that Bootstrap's Glyphicons is a subset of Glypicons PRO, you shouldn't use both, but instead replace the vanilla Bootstrap's glyphicons.less file (in the Bootstrap "less" folder) by the one from the PRO package.

If you are using js build tools like Bower & Grunt, you can have the grunt-contrib-copy task to automate that for you:

copy: {
server: {               
    files: [{//replace the vanilla Bootstrap's FREE glyphicons.less by the PRO's version
        expand: true,
        dot: true,
        cwd: 'path/to/your/less', //put glyphicons.less (PRO version) here                  
        dest:'path/to/bower_components/bootstrap/less',
        src: 'glyphicons.less'
    }]
}

}

This task can be registered in :

 grunt.registerTask('serve', [
    'copy:server', //replace the vanilla bootstrap's glyphicons
     // your other tasks here, for eg: 
     // 'less:server', // to compile the less

    ]);

And will run on:

grunt serve

Answer 2

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)