Using Glyphicon fonts provides several advantages as opposed to using images. They are displayed perfect at any size, they can be styled easily with css, several icons can be retrieved using one http request, and they have great cross browser support. This guide will explain how to create your own Glyphicon font from scratch.
To do so you will need the following assets:
- Adobe Illustrator (A 30 day trial is available on their site.)
- Access to IcoMoon’s Web App
- Vector graphics (or knowledge of how to draw them)
Activate the Artboard by pushing SHIFT+O. Double click on the desired graphic to add it to the Artboard. If done correctly the vector will automatically be trimmed. Give the vector a name on the Artboard by double clicking the name. Hit the V button to return to editing mode.
Your SVG image is now ready to be embedded into an icon font! Head over to IcoMoon to build your font. Choose Import Icons and upload the SVG file you created above. If done correctly the icon will appear as a custom icon!
Click the Font -> button at the bottom of the page, and choose download. Once the files are unzipped you will find the font files (.eot, .svg, .ttf, .woff), a convenient .css stylesheet, and an index.html file with a sample of your font. The index.html file will supply you with the data-icon parameters and class names of each icon in your font.
Once the stylesheet is linked to your page:
<link rel="stylesheet" type="text/css" href="style.css">
You can use the icons with a span tag: