Custom Bootstrap Glyphicon

Objective

Create a custom "glyphicon" to be used with Twitter Bootstrap-based stylesheets.

Creating the icons & fonts

IcoMoon hosts a library of glyphicons as well as a mechanism to upload custom SVG to create new glyphicons.

1. Download glyph to use as a starter template (optional)
   1. Go to IcoMoon
   2. Click on a glyph from one of their free fonts. A modal dialog should open with the glyph details displayed.
   3. Click download.
   4. I think as long as the artboard is square in Illustrator and the icon fills the artboard, it should be good.
      Make sure to check the "Use Artboards" option when saving as .svg from Illustrator.
2. Create a new project at IcoMoon.
3. Load
4. Import Icons button
5. Select the .svg file(s) and upload.
6. Select the icons to include in the font.
7. Generate Font in the lower right.
8. Font > Download in the lower right.
   1. This generates a zip file named icomoon.zip.
   2. The zip file contains .woff, .ttf, .eot, and .svg versions of the font, all located in fonts folder in the zip folder.
   3. The font files are all named icomoon.*. (Optionally) rename them to whatever is desired.
   4. Move the font files to the web site, e.g. in a /fonts/ folder.

IIS

N.B. It may be necessary to add a MIME type for the .woff files on IIS.

• IIS Manager > [Server] > Sites > [My Site] > MIME Types > Add…
  • File name extension: .woff
  • MIME Type: application/font-woff

CSS

Assuming that the site uses Twitter Bootstrap's stylesheet:

// custom glyphicon font files //
@include font-face("Glyphicons Littledamien", font-files("../fonts/glyphicons-littledamien.woff", "../fonts/glyphicons-littledamien.ttf", "../fonts/glyphicons-littledamien.eot", "../fonts/glyphicons-littledamien.svg"));

Defining the individual glyphicons:

.glyphicon-custom {
	font-family: "Glyphicons Littledamien";
}
.glyphicon-paid {
	&:before {
		content: '\e600';
	}
}

Usage

• .glyphicon is Bootstrap's base class.
• .glyphicon-custom overrides Bootstrap's glyphicon font with the custom font.
• .glyphicon-paid is the specific glyphicon to display.

<span class="glyphicon glyphicon-custom glyphicon-paid"></span>