CSS Icons

How To Add Icons

An icon library lets you add icons to an HTML page.

Put the icon class name on any inline element, such as <i> or <span>, and the icon appears.

Because these icons are scalable vectors, CSS can style them: size, color, shadow, and so on.

Font Awesome Icons

Font Awesome icons need a code in the <head> of your page. To get it, sign in at fontawesome.com; what you receive is a small script tag from kit.fontawesome.com.

Note: There is nothing to download or install.

Example

With the Font Awesome script in the head, <i> elements carrying Font Awesome classes display the icons.

An HTML page that adds Font Awesome icons using the icon library.

In the `<head>`, include the Font Awesome kit script. In the body, add several inline `<i>` elements with Font Awesome classes (fas fa-cloud, fas fa-heart, fas fa-car, fas fa-file, fas fa-bars).

> Output: complete HTML page

Prompt

An HTML page that adds Font Awesome icons using the icon library. In the <head>, include the Font Awesome kit script. In the body, add several inline <i> elements with Font Awesome classes (fas fa-cloud, fas fa-heart, fas fa-car, fas fa-file, fas fa-bars).

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>