Icon fonts are ideal way to replace regular PNG or image icons when designing a website, because icon fonts are versatile and relatively lite, they can be easily embedded into HTML using CSS @font-face and best part is that they are scalable, and various CSS effects can be applied just like fonts. Let’s find-out some of free icon fonts available that are absolutely free to use in our web projects.

Icon fonts can be embedded simply using CSS @font-face like any other fonts, but there are few simple rules to follow for cross-platform compatibility. Let us look at the usage of @font-face rule and data-icon attribute to display icons stored in a Font file.

There’s been a lot of buzz lately about Twitter’s Bootstrap framework, many new excellent websites are built upon Bootstrap solid framework. whether your need is a responsive grid system or pre-styled typography, Bootstrap comes in handy, it is very easy to start and well documented. But if you are wondering where to start, look no further, because I am going to show you how responsive layout using Bootstrap works and how we can use it to create flexible websites, let’s get started.

Finding the perfect CSS button isn’t hard these days – just Google it and you’ll come across tons of button generators. Most of them let you simply copy and paste the code. But if you’re looking for something a bit more unique or want some creative inspiration, there’s no better place than CodePen.io. Below, I’ve curated 40+ awesome CSS button examples straight from CodePen. Heads up: the page might take a little longer to load if your internet connection is slow.