Fontawesome - Tutorial

This tutorial covers Fontawesome CSS library for icons.

Fontawesome is an popular opensource icon library for applications. It provides vector icons and svg to integrate into an design and development of apps. It is easy to customize the size ,color and animations. It provides icon asset kit to use in web and desktops applications. Icon library contains css,js and svg for web apps, svg/otfs for desktop apps


You need to know basic HTML and CSS languages

Features and advantages

  • Opensource and paid icon kit is available
  • Easy to integrate into applications
  • provides CDN, local files and Npm library for any type of applications
  • It works with any CSS library, examples are bootstrap, material and bulma frameworks
  • Support any application
  • It is based on CSS, all browsers are supported
  • Icons can be styled with size, rotate
  • Vector icons and SVG to support in all device sizes
  • can be integrated into applications(react,angular,vuejs etc) or design(sketch,adobe) etc.
  • Can be shipped and used as CSS or Sass files


Even though it is great library for popular icons, There are some drawbacks and disadvantages

  • It is JavaScript and CSS files need to be loaded for small applications.
  • Some issues with icons when reading with screen readers
  • For some reason, if css/js library is not loaded, all the icon placeholders are empty, No fullback available


This provides many ways integrate into your applications

  • CDN
  • npm library
  • download


npm install iconsHow to use fontawesome icons in applications
[Social Media Icons](#Branded icons for social media