What are icon fonts? We know about dingbat fonts, are these the same? The answer is yes and no.
Dingbat fonts, fonts such as wingdings, contain icons in them but they are designed for print media usage. Icon fonts on the other hand are designed specifically for web designers.
These fonts help web designers to add icons, such as social media icons, e-commerce icons and all other kinds of icons to web designs without needing to add any images.
With fonts, web designers get the ability to change icon size according to screen resolution of the user. Of course, there are many other customization options that a web designer gets only with fonts. Fonts offer much more control than images.
If you are a web designer, you must be thinking how great it would be if you could add images/icons to your website designs by just using fonts.
How to use icon fonts
These CSS icons can be applied using multiple ways. One of the most common ways is to use a @font-face property in CSS code and use icon font for displaying the icon. I prefer this method.
The other way is being used these days especially for animated icons since fonts don’t contain animated characters at the moment. Fonts can contain animated characters but currently not many fonts are available that contain animated icons so the other method is being used. This includes using an SVG file (which is basically a text file) or a whole graphic made using CSS.
Font Awesome and Other Free Icon Fonts
This is the most popular icon font on the internet right now. It is 100% free even for commercial use and it contains a huge huge library; probably the biggest library of icons.
You can download these fonts in SVG, EPS, PSD or PNG formats, as a Photoshop plugin and as a font.
This font is created by the makers of Foundation HTML5 framework… need I say anything else?
This icon font contains 411 carefully crafted premium level pictograms by Daniel Bruce.
This is another one of the very popular free icon fonts on the internet.
Only a simple @font-face is used for the icons so it is quite easy to customize the icons.
The icon set is a combination of the Bootstrap framework, Font Awesome and some custom CSS for the colors, shapes and effects.
An open source icon set with 223 marks in SVG, webfont and raster formats.
This is the great Raphaël Icon-Set by Dmitry Baranovskiy converted to a Webfont.
This font contains 336 pixel-perfect icons.
This font contains almost all the icons that we need on day-to-day basis. You know, the icons we need in almost every other web design.
Just like the above one, this font contains the routinely used icons we all need. This font is more compact than the above one.
Icon Font Generator and Other Resources
This part contains four very useful resources.
- Fontello: This is one of the most popular icon font generator. This is where you can make an icon font yourself. Just add the icons and this generator will convert those icons into a font.
- Fontastic: This is an alternative to Fontello. Fontastic also has a video made for you, which I’m adding below.
Now let’s check out rest of the two resources.
- We love icon fonts: You already know about Google Web Fonts, right? This is just like that but it is a library of icon fonts only.
- HTML for icon font usage: This is a detailed guide made by CSS-tricks. If you need any kind of coding help for using icon fonts, this is the page that will rescue you.
That’s it for today guys. See you tomorrow.