Icon fonts are great tools for building applications and websites nowadays. They have a great many benefits over fixed sized icons like:
- infinitely scalable
- stylable with CSS (change size, color, etc)
- add stroke, borders, shadows with CSS
- no HTTP request for an icon image
These are simple benefits, but so powerful when used in a real world application.
Table of Contents
How to Use Icon Fonts
Icon fonts are incredibly easy to use. All you have to do is load the CSS file and you're good to go!
For example, in order to use FontAwesome fonts, we just have to load the CSS file and apply the appropriate classes to either an <i> or <span> tag.
<!-- load the CSS file -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- use the icon font -->
<!-- use i or span tag -->
<i class="ti-fire"></i>
<span class="ti-user"></span>
Let's get into the best icon fonts you can use for your projects today.
FontAwesome
Themify Icons
Foundation Icons
Ionicons
Octicons
Linecons
Open Iconic
Entypo
JustVector
SVG Icons
Payment Icons
Bonus: SVG Developer Icons by Scotch
Conclusion
All these sets of icons are unique in their own way. Mix and match them as you create your own customized application or website.
Like this article? Follow @chrisoncode on Twitter