Fontello, Icomoon, Fontastic icon font
An Icon Font is a collection of icons packed as a web font which can be later used on website using some rules and css etc. There are so many benefits of using Icon fonts on websites over icons images. It can be easily customizable considering its color, shadow, and transparency and in resizing. An http request is made to let the font work on your website and reduce page load size as these are only fonts not an image. Icon fonts also work perfectly well when it comes to responsive design. Some of best and free icon fonts providers are: IcoMoon, Font Awesome, Social Media Icon, Web Symbols and Zurb Foundation Icons etc.
Uses and Important features:
Now developers used to add Icon fonts while developing websites as it provide more flexibility and contains so many impressive features which make then to use Icon font first over images.
These fonts are vector-based objects and so resolution independent which means it can scalable from low resolution devices to very high resolution screens such as retina-level. It will not lose precision and quality while scaling at any level. Since these icons are fonts so developer can control its basic attributes such as color, text-shadow, resize and transparency/opacity level. These icons can also be animated through CSS3. Icons can be simply called through @font-face rule which is being supported in even Internet Explorer 4. Before using such free fonts you need to checked and followed the license agreement in your website to honor the developer’s hard work and time.
Fontello is a website where you can select among thousands of free icons and download all of them in a single package to embed in your websites. To use such icon fonts developers need to upload the package in your project folder and then include your fontello css file inside your web pages. Make sure that @font-face rule have correct path description and then you can find list of icon names in the .css file at the bottom. Use this code class="icon-ICON_NAME" to display an icon you can use the same in <i> tag to remove unwanted margin which is .2em by default.
Icomoon is also offering over 3500+ icon fonts free of cost and its premium feature includes synchronizing fonts from cloud, powered by Amazon. Icomoon app let the user select among lots of high quality and most popular icons and one click convert to SVG or Font. This similar service is also offered by fontastic developers and offering crystal clear vector objects for fonts. Iconion is another service tool which is let you create high quality icon fonts even from your desktop itself. It let you convert fonts in high color and high quality image icons for your mobile application, desktop software and web application development.
This is all about the Icons font and its uses over images. It adds an extra impression on visitors of your website. Iconion let the users convert to font image in high quality icon images. You simply need to use any png, jpeg, ico and bmp image of any resolution size then add so many attributes on it such as color, shadow, stroke, gradient, background, background color, background shadow and background border etc. User can also choose from so many already created default templates. It’s done! Yes your image icon is ready to use on your website. Iconion program is ready to download for Mac and Windows operating based systems. It is fully customizable, easy to use and provide high scalability to end users. Iconion is really a great tool to convert your font icons in image icons.
Free download for Windows and Mac!