We’ve said it before, responsive web design does not only have to be about viewing a large scale site conveniently on a small device. Responsive web design should also be about designing responsibly as well. With each HTTP Request we make while loading a web page, the harder the server has to work, and the longer the web page takes to load.
What is an HTTP Request?
Whenever your web browser fetches a file (a page, a picture, etc) from a web server, it does so using HTTP – that’s “Hypertext Transfer Protocol”. HTTP is a request/response protocol, which means your computer sends a request for some file (e.g. “Get me the file ‘home.html'”), and the web server sends back a response (“Here’s the file”, followed by the file itself).
Images are largely the supreme culprit for HTTP request-itas. Let’s take a look at a few bootstrap buttons.
In tradition web design, the icons within each of these buttons would be generated by placing an image within the background of the element. As you may imagine, if we were to call up an image for every icon, picture or graphic we would likely begin to really start to stack up HTTP requests, and our page load times might suffer for it.
Given Bootstrap already includes an awesome glyphicon set using image sprites that chop takes care of our HTTP request problem for us. But as with all images, we cannot responsibly increase their size or change color through CSS if maintaining a standard of quality is desired (and it should be).
Font Awesome is a project that has been developing since the early days of Twitter Bootstrap. It combines the simplicity of graphical icons with the simplicity of text.
Take a look at this quick video to see exactly what I mean.
So now you know why icon fonts are awesome, but wondering why they apply to your bootstrap craving needs? Well I have great news! In the upcoming 3.0 release of Twitter Bootstrap, the glyphicon will be fully rendered in their font form! That means that with only a few lines of code, you will be able to jump in and change icon colors, sizes and more using the same bootstrap techniques that we have all come to enjoy.
Start Using Icon Fonts In Your Projects Before Bootstrap 3.0!
- Download the icon fonts here
- Copy the Font Awesome font directory into your project.
- Copy font-awesome.min.css into your project.
- Open your project’s font-awesome.min.css and edit the font paths to ensure they point to the right place.
There is no better time than now to get going with Twitter Bootstrap, and icon fonts make it even more fun!
Interesting, but what if you need to modify the icons or create new ones?