Editing Custom Bootstrap Glyphicon

[[Category:Bootstrap]] [[Category:CSS]] [[Category:Web Development]]

== Objective ==

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

== Creating the icons & fonts ==

[https://icomoon.io IcoMoon] hosts a library of glyphicons as well as a mechanism to upload custom SVG to create new glyphicons.<ref>[http://stackoverflow.com/questions/18401035/twitter-bootstrap-3-create-a-custom-glyphicon-and-add-to-glyphicon-font Create a Custom Glyphicon] (Stackoverflow)</ref>

# Download glyph to use as a starter template (optional)
## Go to [https://icomoon.io IcoMoon]
## Click on a glyph from one of their free fonts. A modal dialog should open with the glyph details displayed.
## Click download.
## I think as long as the artboard is square in Illustrator and the icon fills the artboard, it should be good.<br />Make sure to check the "Use Artboards" option when saving as .svg from Illustrator.
# [https://icomoon.io/app/#/projects Create a new project] at IcoMoon.
# '''Load'''
# '''Import Icons''' button
# Select the .svg file(s) and upload.
# Select the icons to include in the font. 
# '''Generate Font''' in the lower right.
# '''Font''' > '''Download''' in the lower right.
## This generates a zip file named `icomoon.zip`. 
## The zip file contains `.woff`, `.ttf`, `.eot`, and `.svg` versions of the font, all located in `fonts` folder in the zip folder.  
## The font files are all named `icomoon.*`. (Optionally) rename them to whatever is desired.
## 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&hellip;'''
** '''File name extension:''' `.woff`
** '''MIME Type:''' `application/font-woff`

== CSS ==

Assuming that the site uses Twitter Bootstrap's stylesheet:

<syntaxhighlight lang="css" enclose="div">
// 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"));
</syntaxhighlight>

Defining the individual glyphicons:

<syntaxhighlight lang="css" enclose="div">
.glyphicon-custom {
	font-family: "Glyphicons Littledamien";
}
.glyphicon-paid {
	&:before {
		content: '\e600';
	}
}
</syntaxhighlight>

== 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.

<syntaxhighlight lang="html5">
	<span class="glyphicon glyphicon-custom glyphicon-paid"></span>
</syntaxhighlight>

== Notes ==
<references />