How to create my own custom foundation icons?

[arjunballa]

In our project we need few more custom foundation icons. Can you please review the procedure I followed to create custom icons. Can you share best practices you follow to make sure they work on all browsers

Procedure

• create vector images in Adobe Illustrator
• import vector image into FontCreator (http://www.high-logic.com/font-editor/fontcreator.html) and generate .woff file
• import .woff file into css and add style class for each icons

Questions

• Why icons are mapped to unicode characters and not A-Z, a-z, 1-9(62)?
• May I know what tools you use to create Fonts?
• Can you add vector images to github?

[othersmallcities]

To answer your Question:

The icons are mapped to unicode private use areas for accessibility and semantic reasons: These icons have no relation to normal chars. If you where (for example) to map the Github icon to "g" and a browser does not understand @font-face [any given older browser and some mobile browsers] it will display "g" instead of the symbol. That would make no sense at all.

Also, if you where to use a screen reader [for example a blind user], or a text browser, you end up with the same non-semantic symbols that make no sense.

If you map symbols to private use areas, they simply get ignored in most cases (in worst case you see an empty box, but I have not encountered that yet).

A good read on this topic is icomoon.io docs and if you can spend £2, get this book: Creating Symbol Fonts by Brain Suda. Reading it taught me a lot ^-^

Lastly, you can get the Ai file I created here and just use those as a base for vector images.

Hope that helps,

Philipp