Getting started with Font Awesome

Default featured post

To be honest, I am not good at web designing or more precisely I am awful at it. I also follow old school concepts in designing web interface which is a very poor practice. For instance, I don’t use CSS and instead I use font tag. However, recently, I have decided to put aside my bad habit and trying to update myself. Therefore, nowadays I use Bootstrap library and write some custom CSS, which make the process of interface designing less painful in comparison with past (10 years ago).

This time I wanted to add some small icons to indicate the meaning instead of writing the name behind it. For instance, “email, fax”. In the old school concept, an image tag should be used to address the icon, but in nowadays web designing this can be done easily and flawlessly with using Font Awesome.

The concept is quite straight forward. You add the script address in your HTML head tag and then utilize CSS classes in any HTML tag.

For example, assume I want to use e-mail icon behind my e-mail address. In that case the code would be like following,

<a class="fa fa-envelope" href="mailto:[email protected]?Subject=Hello%20world" target="_top">Send Mail</a>
view raw test.html hosted with ❤ by GitHub

As you can see, using Font Awesome is very very easy. You can find more here.