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 https://fontawesome.com/ 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
- Set color and size on icon
- Add a shadow on the icon
- Align the icon to the center
- Change icon color when mouse is going over
- Add an animation on the icon
- Set two icons together
See the Pen Fort Awesome Tutorial by Andreas Eracleous ( @Sp00ky ) on CodePen .