Affects Version/s: None
Fix Version/s: None
Component/s: UI Options
Creating icons is fairly easy, and there are a lot of free font-icon sets online. The issue is not the icons, but an application that gives us the ability to create a font out of our icons, and a way to create metadata such as ligatures for them.
The reason why we think Icomoon http://icomoon.io/ is our best option is because it provides us with a free offline application that gives us the ability to add our own icons (vectors) to their free icon sets. It also gives us the option to create ligatures for those icons. Free version of Icomoon has a CC Licence 'Attribution 3.0 Unported (CC BY 3.0)"
Here are some other tools that we came across and might be useful:
let us add our own icons
Have ligatures (not changeable)
Criteria used for evaluation:
Illustrator: I used Illustrator to see what happens when we convert the icon fonts back to vectors, and also how the vectors would look if pixelated.
InDesign: Testing OpenType options and abilities of the icon fonts.
Chrome, Firefox, and Safari: Some of the icon font creators including Icomoon, contain an “index.html” file that could be tested with browsers. We tested this file with different browsers to see if the ligatures and text to speech work, and also to see if every icon is being rendered correctly.
Font icons are great because we can easily:
- Change the size and color - Shadow their shape
- Have different icon sizes in the same font
- Do everything image based icons can do, like change opacity or rotate.
- Add strokes to them with text-stroke or add gradients/textures with background-clip: text;
- Convert them to text
They also have some drawbacks:
- We cannot have two-toned icons.
- We cannot have other languages in metadata, and space is not allowed between the words in the metadata.
- Alignment could become an issue
- IE8 and IE9 do not support font-icons with ligatures.
But before doing anything with these icons, we need to conduct some tests:
- Investigate and see if there is a way around for IE8/IE9.
- Test and see if PUA (Private use area) works with screen readers in our supported browsers.