CSS Icons

Icons can easily be added to your HTML page by using an icon library.

How To Add Icons

The simplest way to add an icon to your HTML page is with an icon library, such as Font Awesome.

Add the name of the specified icon class to any inline HTML element (like <i> or <span>).

All the icons in the icon libraries below are scalable vectors that can be customized with CSS (size, color, shadow, etc.).

Font Awesome Icons

To use Font Awesome icons, go to fontawesome.com (opens in a new tab), sign in, and get a code to add in the <head> section of your HTML page:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

title: "Font Awesome Icon Example"

To use Font Awesome icons, include the script in the <head> of your HTML and then use <i> tags with the appropriate class names.

Here’s a simple example:

<!DOCTYPE html>
<html>
  <head>
    <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>

title: "Bootstrap Icons Example"

Bootstrap Icons

To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

title: "Material Icons Example"

Material Icons

To use Google Material Icons, include the following line in the <head> of your HTML page:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">