IconFont2Code, my open-source tool in order to view icons in font files and create C# class with the glyph constants

As an app developer, it's impossible not to have the task to display an icon in the app. One of the common ways to display icons, instead of using images or SVGs, is by using font files (.ttf, .otf or .woff).

Although font files are usually used to display text with a specific font, but they can also be used to display icons. Instead of containing glyphs with letters, they contain glyphs with icons:

There are different types of font technologies but the most common ones today are the TrueType (.ttf), OpenType (.otf) or the WOFF (.woff) font files. The way they store and render the glyphs is using a collection of line and curve commands as well as a collection of hint, which allows them to provide both relatively fast drawing speed and true device independence.

The device independence is a key aspect given the myriad of display sizes and technologies which exist today.

Referring to an icon inside of a icon font file works by knowing the hexadecimal value of glyph with that icon. To know the hexadecimal value you can use a font viewer which displays the glyphs and the values.  While there are many font viewers available, but as far as I know, none of them  offered the ability to be able to create C# code with constants which the developers can use in our apps.

This is why I created a tool to view the icons also create C# code with the glyph values: 
https://andreinitescu.github.io/IconFont2Code/

The tool has a few tricks in his bag in order to come up with generating the C# code using C# properties which make sense so that it's easy to reference in the code.

If the font files has the glyphs stored with meaningful names, the IconFont2Code tool will use that to generate the C# code. Otherwise, it can go and try find a corresponding CSS for the font file and extract CSS class names in order to use them as the C# properties. 

Getting the URL of the CSS file is done using a mapping scheme which tries to map a known font file based on a combination of the font name, the font file name or the font uniqueID. This mapping is defined here:

https://github.com/andreinitescu/IconFont2Code/blob/master/js/mappers.js

If you see a font which is not in the list and which could use this feature, don't hesitate to open an issue on GitHub and I will add a new mapping for it. Or, better, you could also open a pull request!

You can also apply a CSS manually by using the "Choose file" button in the right panel:

Using the icon fonts in your app

Depending on the technology you are using, there are already many blog posts which show you how to actually add and use a font file in your app. For Xamarin.Forms here's one I can recommend written by James Montemagno, Principal Program Manager at Microsoft:

https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/



Tips for using font files

The size of our apps is always a very important factor which can impact the startup speed or the update speed and the size it takes to install on the user's device.

Font files can be an issue from the size point of view, but there are ways to make font files smaller:

• The .WOFF fonts are much smaller than .TTF and .OTF but as far as I know, it doesn't work on Android. It does work on iOS though.
• Use a font with only on the icons you actually use in your app. Instead of adding a font with thousands of glyphs when you only use 10 or 15 of them
• Some fonts have versions for desktop and web and the size is very different. For example in FontAwesome 5.13.0, the desktop version "Font Awesome 5 Free-Solid-900.otf" is 568 KB while the web version "Material-Design-Iconic-Font.ttf" is 97KB!