Andreas Eracleous

Get Started with Font Awesome Icons

To stay updated when a new content for devs is out, sign up!

font Awesome Icons

In this post, I use Font Awesome icons in CSS to show how to use Font Awesome icons in CSS and also what someone can do with them in a website. First of all, the Font Awesome  provides a complete set of icons in vector and the user can customise size, color, drop shadow and etc. easily with the power of CSS.  It is awesome because no JavaScript required, it is scalable vector graphics that means the icon looks great at any size on high-resolution displays and as well it is absolutely free for use. Using Font Awesome icons instead images in a website, it helps to minimise the website’s size and as a result it loads website faster. To starting use Font Awesome icons, first you need to download the font-awesome.css  cascading style sheet (CSS) file from its website  and then import it in HEAD tag HTML section. Continuously on the Font Awesome’s website, go to the “ icons” section where here you can see all the icons that you able to use.

What you can do with Font Awesome icons

  1. Set color and size on icon
  2. Add a shadow on the icon
  3. Align the icon to the center
  4. Change icon color when mouse is going over
  5. Add an animation on the icon
  6. Set two icons together

See the Pen Fort Awesome Tutorial by Andreas Eracleous ( @Sp00ky ) on CodePen .