Skip to main content

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index] [List Home]
[orion-dev] Switching to an icon font


I've just submitted the code that switches Orion from using a traditional sprite map to using an icon font.

We had been leading up to this for a long time - firstly by styling Orion over time to use monotone icons that would work for the things we need them to represent, then finally conditioning the set and learning how to make it work as a font.

An icon font offers lots of benefits - for example ...

Resolution clarity - font icons now look sharp on retina displays and when zoomed - mobile friendly

Style flexibility, and theming - font icons can be individually coloured and sized

Performance - the font file is only 8k in size, so it is tiny and loads efficiently

Accessibility - font icons should behave well when contrast is adjusted  [ still need to test this ]

In the coming days I'll write a blog post going into more detail, and I'll link to a page showing the icons.

I've spent time making the icons work especially well at 16x16 px. Webkit and Mozilla browsers support font smoothing as a css option, so I've added that for our icon set.

You might notice changes to some of the actual icons we had in the last release. This was to make them work better mechanically as a font character, or in some cases it was because of feedback from the Orion community. Please let me know if anything doesn't work for you programmatically or stylistically, or if you have other ideas - we'll refine things over time and as others in the design community help us evolve.

This first change is a significant one - there might be some icons and locations that need tweaking - since line height can start to matter with a font icon. When we've settled, we will be organised to add new icons or modify individual ones reasonably quickly.

In addition, I've changed the table color back to grey, and the file types back to a shade of grey. The file icons are not solid shapes anymore, and I think this helps the IDE look a little cleaner, and more refined - especially with large trees.

Please reload your plugins to make sure you see the file type icons in particular.


Back to the top