Glyphicons Pro
Bootstrap icons / Bootstrap glyphicons. Bootstrap doesn’t include a bootstrap icons library by default, but we prepared our own icons set. We are pleased to show you CoreUI Icons. CoreUI Icons PRO. If our free icon set is insufficient you can buy CoreUI Icons Pro with more than 2000 icons, and more styles.
The glyphicons-pro.less file is intended to bolt onto Twitter Bootstrap and includes classes for the GLYPHICONS PRO icon set. The GLYPHICONS PRO set contains 400+ icons. This file is compatible with Twitter Bootstrap v2.2.2+
REQUIREMENT
A GLYPHICONS PRO license is required. Once a license is purchased, download the appropriate font files (glyphicons-regular.eot, glyphicons-regular.otf, glyphicons-regular.svg, glyphicons-regular.ttf, and glyphicons-regular.woff) into the font folder.
INSTRUCTIONS
In bootstrap.less, replace @import 'glyphicons.less' with @import 'glyphicons-pro.less'
The GLYPHICONS Sprite Generator allows you to change the size and colors of theBootstap icons using the Free or Pro versions of GLYPHICONS. When using the Profiles, all the extra icons will be available to your Bootstrap project.
New CSS and PNG sprites are generated that can override Bootstrap'sdefault icon before or mixed into a Bootstrap LESS project.
Dependencies
The only required non-standard-library package that is needed is the PythonImaging Library. To install this simply run 'easy_install pil' or'pip install pil'
How to use sprite-generator.py
Download the type of GLYPICONS distribution and extract the zip file
Copy sprite-generator.py into the extracted glypicons_free or glyphicons pro folder
Check to see if you want to change any of the constants at the top of thescript (size, preview background, etc)
Run sprite-generator.py, if everything worked property, sprite-generator.py willhave generated the following files in the 'sprites' directory:
- glyphicons.css CSS Overrides
- glyphicons.html Preview HTML
- glyphicons.png Black Icons
- glyphicons-white.png White (or colorized) icons
Open sprites/glyphicons.html in your browser (if you're on a Mac, it will try and do so itself)
How to use in your Bootstrap project
- Copy the glyphicons.png and glyphicons-white.png to the project img directory.
- Include the glyphicons.css file after the bootstrap CSS files or include inyour bootstrap.less files after the sprites.less entry.
- Edit glyphicons.css, fixing the paths to the image files in the background-image directives.
How to change the icon sizes or colors
In sprite-generator.py are three variables you can use to impact the generatedsprites: WHITE, PREVIEW_BACKGROUND and ICON_SIZE.
The WHITE variable controls the RGB values of the foreground of the icons. Change any of thethree values to any number between 0 and 255:
The PREVIEW_BACKGROUND variable only impacts the glyphicons.html file and can be used totweak icon colors against different backgrounds. This is an RGB triplet without thehash symbol (#).
The ICON_SIZE changes the dimensions of the icons in the sprites and in the CSS. Thisshould be two values representing the width and height:
Using Glyphicons
Since you're here and if you plan on using this, you should support the designerwho made GLYPHICONS and pay the modest license fee for the Pro version. Not onlydo you get more icons out of it, but whatever you're using this for will gethigher quality icons out of it. If you use the Pro icons as a source, the higherresolution icons will be used.