Font Awesome 5

Font Awesome 5 has a PRO edition with 4845 icons, and a FREE edition with 1480 icons. Here In this tutorial will concentrate on the FREE edition.

To use the Free Font Awesome 5 icons, add the following <link> element inside the <head> section of your HTML page and display icons by using a class attribute with the prefix fas followed by the icon’s name.

<!DOCTYPE html>
<html>
<head>
<link rel=’stylesheet’ href=’https://use.fontawesome.com/releases/v5.7.0/css/all.css’>
</head>
<body>

<i class=”fas fa-band-aid” style=”font-size:40px;”></i>

</body>
</html>

Result:

Note: NO download is required just place the <link> in <head>

New in Font Awesome 5 is the fas prefix, Font Awesome 4 uses fa

The s in fas stands for solid, and some icons also have a regular mode, there r specifies as by using the prefix far:

<i class=”fas fa-clock”></i>

<i class=”fas fa-clock”></i>

Result:

  

Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons.

Also note that if you change the font size or color of the icon’s container, the icon changes. Same things go for shadow, and anything else that gets inherited using CSS.

<i class=’fas fa-clock’ style=’color:blue; font-size:40px;’></i>

<i class=’far fa-clock’ style=’color:red; font-size:40px;’></i>

Result:

  

Sizing Icons

The fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x and fa-10x classes are used to adjust the icon sizes relative to their container.

Example:

<i class=’fas fa-clock fa-xs’ style=’color:blue;’></i>

<i class=’fas fa-clock fa-sm’ style=’color:blue;’></i>

<i class=’fas fa-clock fa-lg’ style=’color:blue;’></i>

<i class=’fas fa-clock fa-2x’ style=’color:blue;’></i>

<i class=’fas fa-clock fa-4x’ style=’color:blue;’></i>

<i class=’fas fa-clock fa-6x’ style=’color:blue;’></i>

<i class=’fas fa-clock fa-8x’ style=’color:blue;’></i>

<i class=’fas fa-clock fa-10x’ style=’color:blue;’></i>

Result: