Iconion: awesome icon creator

Have you noticed a new trend taking place when it comes to web design and web icon fonts and why? One huge reason for a designer to use and create these icon fonts is the freedom it gives them when they want to manipulate them and change them using CSS. Remember how if we wanted to create rollovers and effects we needed to create at least two completely different images, but luckily this is no longer the case. By using icon fonts along with CSS we can now modify the html elements with a minimum of fuss.

Certainly when there are these new web development trends they can affect us in two ways. Sometimes we can get excited, however there are times we are left feeling disappointment too.

Often when new ways to develop websites comes along it also brings with it new tools coupled with ideas. Having said that, these new trends come out ahead of any support in browsers, which basically makes it so the designer cannot implement them until there is cross browser compatibility. Luckily for web designers and developers Icon fonts do not take this road.

In older days on the Internet the use of images was done when icons and symbols were needed. The issue they had when using images for such things was all the work that was required to create these small graphics. Things such as designing, optimizing, and sizing of the each image needed to be done before they were added to the sites for the user. It also was a huge task to remake them if at any point in time the website needed to change its branding in any way.

Yes making use of icon fonts is a new modern way of design and iconography, however it comes with much more flexibility when designing and it as compatible as the traditional methods were.

Web icon fonts can also be described as super sprites due to them being comprised of both letters and also punctuation marks. They can be used without any sacrifice with cross-browser support and by implementing them the CSS font properties will also benefit the designer.

Some of the Benefits of Icon Fonts

Not only do icon fonts have the benefits of Css font properties, and compatibility with cross-browser they also have these:

Increase in Performance – When a user loads a site with web symbols font the speed should increase due to the reason that it now only requires one HTTP request to the server and also a font file like this has a very insignificant file size.

Site Attractiveness – Icon fonts will be much clearer to the viewers’ eyes, even on the high-resolution screens such as the Retina screen. The reason why they look so much crisper and cleaner is because font symbols are basically vector graphics.

Scaling of the Font – Resizing the fonts can be done instantaneously without the need of any graphic software such as Photoshop.

Ease of Access – We can now make use of ligatures with these types of fonts which them gives us the opportunity to use a text phrase to represent a symbol. The benefit of this is search engine spiders understand it much better plus these phrases make much more sense to those with impaired vision.

Adding Effects – The creativity doors opens up for us as well by allowing the use of any CSS effect to be applied such as text shadowing.

Gain in Efficiency of Workflow – Timesavings becomes apparent as now it is possible to avoid the whole process of generating sprites and positioning them properly.

The Cons of Icon Fonts

Happily there are not many cons associated with font icons, yet there are just a few that should be mentioned:

Color – Applying color to a font is usually limited to only one choice, but there is a known workaround using the font property gradient.

Design Limitations – Symbols and graphic icons are often designed with an alternate version as well as at various sizes too. An example being a favicon that is 8px in size is going to look much different then a 100px header graphic containing a logo. Since each symbol within an icon font will have the same design regardless of its size it then becomes a problem due to this. Creating additional font sets is definitely a great workaround, however making use of either an image or an image sprite many be the better of the two options when requiring alternate designs.