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