Edit a Font Awesome icon and add it to your own Font Awesome font

Font Awesome is awesome, but what if you need an icon like a Font Awesome icon, but a tiny bit different? Recently I needed to create calendar icons representing days, weeks and months, and I used the Font Awesome calendar icon as a base.

This tutorial shows how to download a copy of a Font Awesome icon, edit it, then create a subset of Font Awesome with your new icons.

First of all, visit IcoMoon and click the IcoMoon app.

Screen Shot 2014-02-04 at 09.44.51

Use the search box to find the icon you want to edit. Click on the pencil icon in the toolbar at the top of the app, and click the icon you want to edit.

Screen Shot 2014-02-04 at 09.45.22

The icon edit dialogue will pop up. Click Download at the bottom of the dialogue, and you’ll get a copy of the icon in .svg format in your downloads folder.

Screen Shot 2014-02-04 at 09.45.27

Next download a copy of InkScape. This’ll let you edit the .svg (other programs will let you edit the .svg but won’t let you save in .svg format). When I downloaded InkScape I had to get a copy of XQuartz┬áto make it run. Not crystal clear, so worth mentioning.

Anyhow.. once you’ve got InkScape running, open up the .svg of the icon from the Downloads folder.

Screen Shot 2014-02-04 at 09.46.26

Make your changes. I just wanted to blank out some of the calendar days to create a ‘day’. I used the square / rectangle tool from the left toolbar to create two black rectangles (it’s important to use just black and white!) to blot some of the calendar days out.

Screen Shot 2014-02-04 at 09.46.58Screen Shot 2014-02-03 at 19.30.28

I opened up the .svg code view at this point (the little < > icon in the top toolbar). Not necessary but it sort of illustrates what’s going on in the next steps.

Screen Shot 2014-02-03 at 19.31.03 Screen Shot 2014-02-03 at 19.31.26

First, hit Edit -> Select All in All Layers.

Screen Shot 2014-02-04 at 12.55.54

 

Then, Path -> Object to Path. Self explanatory, you’re turning whatever shapes you drew into paths. If you opened the .svg code editor, you’ll see the xml svg:object nodes there turn into svg:path nodes.

Screen Shot 2014-02-03 at 19.31.43

 

Click Path -> Union. You’re making all the paths into one. Font Awesome only reads the first path in the .svg so if you don’t merge that with the new paths, once you upload the icon it’ll look like you haven’t done anything!

Screen Shot 2014-02-03 at 19.31.55

Just a screen capture showing that the paths in the .svg code window have merged into one.

Screen Shot 2014-02-03 at 19.31.58

Save the .svg as Plain SVG – NOT InkScape SVG.

Screen Shot 2014-02-03 at 19.32.13

Go to Fontello.com. Upload your new .svg by dragging into the box or clicking on the spanner, then Import.

Screen Shot 2014-02-03 at 19.32.20

There are your icons – I made a ‘week’ and ‘day’ one.

Screen Shot 2014-02-03 at 19.32.32

Select those and any other icons you need, and hit Download webfont.

Screen Shot 2014-02-03 at 19.36.53

Upload the whole folder you downloaded from Fontello to whereever you keep stylesheets etc on your server. Then you can include the font on your website with one line of code linking to the fontello.css stylesheet:

<link href=”{whereever you put the folder}/css/fontello.css” rel=”stylesheet”>

If you were using the normal Font Awesome before, some of the icons may have different names now so you’ll have to update the icon classes on your site. The easy way to find the new names (or change the ones used by the font) is to click Customize Names on Fontello.

Screen Shot 2014-02-03 at 19.41.51

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>