Adding Custom Icons to FontAwesome

The 3 main steps for adding custom icons to FontAwesome are:

Convert the PNG/GIF/BMP image(s), etc to SVG (vector) format (recommend using InkScape)
Upload the SVG(s) to IcoMoon and generate a custom font
Use the custom font alongside FontAwesome

Convert the Raster Image into a Vector Image

Below, I will detail the process of converting a raster image (in this case a PNG) into the required vector format (SVG) using InkScape.

First we need to import the raster image. To do this you can either use File-->Open and select your source image, or you can simply drag and drop the source image onto the canvas. In both cases, you should be prompted with the image import dialog in which case you should ensure the following settings are selected:
Now we need to do the actual conversion process. To do so, ensure the image is selected by clicking on it. When the image is selected you will see arrows in the corners and edges of the image. Once the image is selected, you need to select Path-->Trace Bitmap. This will open a new window or pane in which to initiate the bitmap trace. For black and white icons, just use Single scan option. For coloured icons, you may need to use the Multiple scans option. Leave all the other options at their default settings and click the Update button. You should then be presented with a preview as shown below:

If the preview came out as intended, simply click Apply and you are done with the tracing step and you can close the Trace Bitmap window/pane. Otherwise you may need to experiment with the Options until the desired image is shown in the preview. For more complex designs you may need to use the manual tracing method, but that is outside the scope of this document, however I will link to a YouTube video at the end of this document that goes through all of these steps including manual tracing).
After clicking Apply in the previous step, the software will generate a vector copy of your image. The vector image will overlay the original image but will be selected so you can drag it off and zoom in to verify. Zooming in on the vector image you will not see any “jaggies” or blurry sections (as it is a vector!). You can then select the original image and hit the delete key to remove it from the canvas (the original image will not be affected). We now want to ensure that the canvas is sized to the image. To do this, ensure the vector image is selected and open File-->Document Properties... Then click the Resize page to content expander, and then click the Resize page to drawing or selection button. This will resize the canvas to fit your image. You can close the Document Properties window/pane.
You now need to export the image as an SVG file by clicking File-->Save As… Ensure that Inkscape SVG is the type selected, give your file the appropriate name and path and click the Save button. You are done!

Generate a Custom Font Using Your SVG File

For this we will use the IcoMoon web app, so open the following link https://icomoon.io/app/#/select and click the Import Icons button at the top of the page. Navigate to and open the SVG vector image(s) you wish to import and open them. This will create an “Untitled Set” comprised of your SVG image(s):

It is then simply a matter of clicking the Generate Font button at the bottom of the screen and then downloading the font generated using the link as shown below:

Using the Custom Font Generated by IcoMoon

Once you have generated and downloaded the custom font archive, you can extract the file and incorporate the CSS and fonts into your own website and use them in the same way as for FontAwesome fonts, noting the name given to IcoMoon fonts are prefixed with “icon-”. So for example n my case, the original bill.png can now be referenced using the CSS class icon-bill.

Note however that you need to reference the new icon using the exact name - i.e. do not expect “fa-icon-bill” to work. So in my case, I updated the relevant adapters to use the exact name from the formmapping.xml file (dropping the automatic prefix of “fa-”) and update the formmapping.xml file appropriately. e.g.:

This then allowed for my custom icon to be used in the sidebar and home menu’s alongside the FontAwesome icons (note the bill icon used for sales quotes):