Search code examples
angularjstwitter-bootstrapglyphicons

How to use glyphicons pro within an angular 1.6 / Bootsrap 3 project


I've bought Glyphicons Pro and I'd like to use it in my Angular 1.6.x/bootstrap 3 projects. (my first project). I've used Yeoman (yo gulp-angular), so I'm using Gulp as well (very basic knowledge)

I've found a post on stackoverflow, but it seems a bit dated, since bootstrap is now using Sass, and the folder structure has changed.

There is a bootstrap example in the pro package, but there are no instructions, so I'm a bit lost, and I'm not sure what version of bootstrap it's using.

Also, I would need to include the change in gulp so that it builds up.

Has anyone figured out how to include Glyphicons pro in Bootstrap3+Angular 1.6?

(I'm also quite new at posting question here, feel free to give pieces of advice to improve my question)


Solution

  • I manage to have a working solution for my project at least.

    I've created a project on github

    https://github.com/dev-mansonthomas/bootstrap3-glyphicons-pro

    that explains the step by step procedure to manually modify bootstrap so that it uses the glyphicons pro (you still have to buy glyphicons pro ;)

    I'll try to automate this later.

    Basically, I've created a _glyphicons-pro.scss, and inject the CSS code from glyphicons pro bootstrap css example, using the scss syntax.

    I've lightly tested it so far, I'll update the github project if needed.

    I didn't include the light, drop, x2, x3... X6, flip, rotate css class.