CSS Icons

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

CSS Icons

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

The name of the icon class is specified in the inline HTML element (like <i> or <span>).

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

Example 1: Font Awesome Icons

To use Font Awesome icons, add the following link to the <head> section of your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Example 2: Google Icons

To use Google icons, add the following link to the <head> section of your HTML page:

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

Example 3: Bootstrap Icons

To use Bootstrap icons, add the following link to the <head> section of your HTML page:

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

Example 4: Styling Icons

Icons can be styled just like text using CSS.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="nofollow">
<style>
.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: darkblue;
}
</style>
</head>
<body>

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

</body>
</html>