Create & Embed Custom Icons on Your Web Site

Icons are great. Now more than ever, icons are being used in Web design and mobile application development as referenced font files in place of inline image files. Custom font packs are small, quick, and scalable.

I'm a big fan of Font Awesome Icons and Bootstrap's native glyphs. Their icon packs are simplistic, intuitive, and sleek, so I can usually lean on those folks to help make quick decisions with my design choices. There are plenty of other resources out there as well but these two take care of almost all of my needs.

Recently I had the need to stylize a navigation menu with some icons, but Font Awesome and Bootstrap weren't broad enough to cover the project. I decided to put together a custom font with all the icons I needed.

Create a Custom Font

There are a number of dedicated software you can use to create your own fonts - both free and licensed - but I found that Inkscape (free, open source) works surprisingly well to build the base set of icons. There are a few little tricks but its built-in SVG Font Editor is designed to get the job done.

Build your icons in Inkscape:

Simplicity is preferred. There are a few guidelines to follow here, but feel free to play around with these until you find something that works for you. Let me know if you find better settings:

! Here's a downloadable SVG file that is set up as a template to get you up and running. The page size is set, and it contains a character map and a single icon as reference. Open that directly with Inkscape.

1. The size of your icons seems to work well around 75 pc x 75 pc (1125 x 1125 pixels)
• Go to File > Document Properties. On the Page tab, under Page Size > Custom Size, change the Units to pc (pica), and manually punch in a Width and Height of 75
• Leave the Default units at the top of the dialog set to px (pixels)

2. Place a guide slightly below the lower bound of the page (at -50 pixels). Drag a guideline onto the page then double click it to show the Guideline properties where precise location values can be entered. This will be used to align the icon when setting it as a character. Remember that certain typeface characters can extend below the baseline (g,j,p,q,y, etc.) so the centering is a little wonky when creating a font with icons

3. Be mindful of the difference between lines with thicknesses applied, and polygon shapes. In my process, I found the best results were produced from combining polygon shapes together and using Path Operations (Union, Difference, Intersection, Division, Linked Offset, etc.) to create outlines out of polygons, rather than using a stroke lines with various line thicknesses. The illustration below is how I created the outline for the safety icon. The top line is the correct process:

So the Christmas tree icon isn't an outline. It is now a single polygon with most of the center erased. The negative space is a hole. The fill is black, and there is no stroke on the shape.

4. To ensure all of your elements are indeed polygons with a black fill and no stroke, I recommend performing a Union on all of the elements instead of grouping them together. Errors will be apparent, and the result will be a single element; even if there is negative space separating items

5. Speaking of black and white, fonts do not preserve multiple colors, transparencies, or blurs. I suggest developing the icons in black (or one single color) only so you don't have unexpected results

6. It helps to save your icons in some kind of  key or character map to can quickly find and re-order your icons as necessary

A rough character map of the 9 icons
that were created for this font pack

Add Icons as Font Characters

Once your icons are designed, use Inkscape's SVG Font Editor to assign each icon to a unique letter:

• In Inkscape, navigate to Text > SVG Font Editor
• Under the Font pane on the left, click on font1 to rename your font and hit your Enter key to Apply the name
• Also change the Family Name in the Global Settings tab to your desired font name

• Navigate to the Glyphs tab
• Type abcdefg... in the Preview Text box. This will help confirm that your icons are mapping correctly - a hand full of black (unmapped) boxes should appear for now

• Select your icon and align it to the center of the page, and snap the bottom edge to the guideline that is -50 px below the page

• Back on the SVG Font Editor, click the Add Glyph button
• Slow double click on the Glyph Name glyph 1 and enter your own icon name. For my example, I'll name the icon Overview. Hit Enter to confirm
• Click on that new item to select it - it will turn into a blue bar
• Under the Matching string column, click on the selected glyph item to bring up a hidden text box. Type the lowercase letter a and hit Enter. This will assign the Overview icon to the 'a' character in this font

• Click on that item again to make sure the selection is applied - it should turn blue
• Click on your icon graphic to select it
• In the SVG Font Editor, click the Get curves from selection button. If your graphics are created correctly, your icon should appear in the first black box of your preview. If nothing happenes, go through tips 3 & 4 in the previous section. If all else fails, reply in a comment and I'll do a more in-depth article on creating sufficient polygons for this process

! Note: The icon looks a bit large here, but its layout is correct on my final result

• Save this as an SVG. Even though your icon graphics are moved outside of the page into the character map legend, the SVG file will have all the embeded information on your font characters ready for a conversion to .TTF, etc.

That's pretty much it for this process. To review:

1. Repeat aligning your icon graphic the correct position on the page space
2. Add a new glyph
3. Name and map the glyph to a character
4. Grab the curves from your selected icon

Updating Font Characters

Making updates to the font mapping - changing the order or updating the glyph graphics - is as simple re-mapping graphics to a glyph item in one of three ways:

1. Change the value of the matching string - i.e. enter a different character that will call a glyph

2. Select a glyph, select the updated graphics as aligned on the page, and click Get curves from selection to apply the update

3. Right click the glyph item, choose remove, and Add a new glyph as necessary

Convert SVG to Font File

Finish up by converting the SVG file to a .TTF for use on your computer, and a .woff file for use on the Web or in your applications:

• Navigate to fontconverter.org
• Upload your SVG and choose to ttf - TrueType font as the output format and click Start to convert and download your custom font
• Repeat the previous step, chosing woff - Web Open Font as the output format

! In Windows, right click on the .ttf file and choose Install. Restart any opened programs, and you can use the new custom font in your local applications like Word, Excel, Inkscape, Illustrator, Photoshop, etc.

The .woff file will be referenced by your Web application code in the next step

Embed in a Web Page

Use basic CSS & HTML to embed the icon in a Web page. Here's an example of a menu with the icons displayed using CSS's ::before selector. Unfortunately I'm having a problem referecing a custom font on CodePen, but the code works.

CSS:

1. Reference the font:
@font-face {
  font-family: "Custom Icons";
  src: url("Custom Icons.woff"); /* or .ttf, etc. */
}

2. Call the font in a class selector:

.custom-icon {
  font-family: "Custom Icons";
  -webkit-font-smoothing: antialiased;
}

3. Reference the individual icons

.custom-icon-overview {content: "a";}
.custom-icon-anotherIcon {content: "b";}
/* Etc. */

HTML:

Call the icon as a class in lots of elements. Try the otherwise obsolete <i> tag, similar to FontAwesome

<i class="custom-icon custom-icon-overivew></i>