Icons Tutorial

How to Add Icons

To insert an icon, add the name of the icon class to any inline HTML element.

The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (Size, Color, Shadow.. etc.)

Font Awesome 5 Icons

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

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

Note: No downloading or installation is required!

<!DOCTYPE html>
<html>
<head>
<link rel=’stylesheet’ href=’https://use.fontawesome.com/releases/v5.7.0/css/all.css’ integrity=’sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ’ crossorigin=’anonymous’>
</head>
<body><i class=”fas fa-band-aid”></i>
<i class=”fas fa-cat”></i>
<i class=”fas fa-dragon”></i>
<i class=”far fa-clock”></i>
<i class=”fas fa-clock”></i>

</body>
</html>

Result:

           

Font Awesome 4 Icons

To use the Font Awesome 4 icons, add the following line inside 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”>

Note: No downloading or installation is required!

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
</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>

Result:

           

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

Note: No downloading or installation is required!

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
</head>
<body>

<i class=”glyphicons glyphicons-cloud”></i>
<i class=”glyphicons glyphicons-remove”></i>
<i class=”glyphicons glyphicons-user”></i>
<i class=”glyphicons glyphicons-envelope”></i>
<i class=”glyphicons glyphicons-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:

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

Note: No downloading or installation is required!

<!DOCTYPE html>
<html>
<head>
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
</head>
<body>

<i class=”material-icons”>cloud</i>
<i class=”material-icons”>favorite</i>
<i class=”material-icons”>attachment</i>
<i class=”material-icons”>computer</i>
<i class=”material-icons”>traffic</i>

</body>
</html>

Result:

cloud    favorite    attachment    computer    traffic