This site is 📱 accessible. Tap here to use the mobile stylesheet.

4.3 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 the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page:

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

Read more about how to get started with Font Awesome in W3Schools.com Font Awesome 5 tutorial.

Note: No downloading or installation is required!

Example 1 - adding Font Awesome icons

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

Result:

For a complete reference of all Font Awesome icons, visit W3Schools.com Icon Reference.

Bootstrap Icons

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

Note: No downloading or installation is required!

Example 2 - add bootstrap icons

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>

Result:

Google Icons

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

Note: No downloading or installation is required!

Example 3 - adding Google icons

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
href="https://fonts.googleapis.com/icon?
family=Material+Icons">
</head>
<body>
<i class="material-icons" 
      style="color: grey;">cloud</i>
<i class="material-icons" 
      style="color: red;">favorite</i>
<i class="material-icons" 
      style="color: green;">attachment</i>
<i class="material-icons" 
      style="color: silver;">computer</i>
<i class="material-icons" 
      style="color: gold;">traffic</i>
</body>
</html>

Result:

goat

Styled Google icons (size and color):

I personally believes this leads to the icon hosting service being able to siphon off data provided by web visitors. Use with caution.

CSS Course Home
Module 4: Text, Fonts and Icons