Fontawesome - Tutorial

Fontawesome is a popular open-source icon library for applications. It provides vector icons and SVG to integrate into the design and development of apps. It is easy to customize the size, color, and animations. It provides an icon asset kit to use in web and desktop applications. Icon library contains CSS, js, and SVG for web apps, and SVG/otfs for desktop apps.

prerequisite

You need to know basic HTML and CSS languages to integrate into web applications.

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 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

Disadvantages

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

• It is JavaScript and CSS files that 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

Installation cdn

It provides many ways to integrate into your applications.

• CDN
• npm library(npm, yarn, and bower)
• download

Fontawesome Styles

There are four types of styles of icons provided.

• Solid: Espresso-style icons designed with bold to pixel strokes. It is available as open-source and free to use in an application
• Regular:Espresso style icons designed with bold to pixel stroke. It is available as open-source and free to use in an application
• Light: Latte Style, Icons designed with regular icons and 1pixel stroke.
• Thin: Flat White Style, icons are designed with thin and half-pixel stroke
• Duotone: Cafe con Leech Style that contains colors independently with adding transparent layer strokes.
• Brands: Company styles that contain company logs, available as open source.

cheatsheet