How to create custom glyphicon fonts
by Riley MacDonald, October 10, 2013

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:

First draw or open your existing vector graphic in Illustrator:1

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

Now the vector is ready to be saved as a .svg file. Choose Save As from the File menu, and select SVG. Be sure to select Use Artboards -> All.
3

Choose the default settings for SVG 1.1. Refer to the image below if your settings were modified. 4

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! 5

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:

<span class="icon-Twitter">
Open the comment form

Leave a comment:

Comments will be reviewed before they are posted.

User Comments:

How to create custom glyphicon fonts | Riley MacDonald | InhumanBlog on 2014-10-11 16:05:04 said:
[…] https://rileymacdonald.ca/2013/10/10/how-to-create-custom-glyphicon-fonts/ […]