Icons Tutorial
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });
Icons Tutorial
❮ Home
Next ❯
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 Icons
To use the Font Awesome 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!
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">
</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>
Try It Yourself »
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });
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!
Example
<!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>
Try It Yourself »
Google Icons
To use the Google icons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Note: No downloading or installation is required!
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</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>
Try It Yourself »
For a complete list of ALL icons (font awesome, bootstrap and google), visit the
Icon Reference.
For a complete list of all Font Awesome icons, visit the
Font Awesome icon reference.
For a complete list of all Bootstrap Glyphicons, visit the
Bootstrap Glyphicon reference.
For a complete list of all Google icons, visit the
Google icon reference.
❮ Previous
Next ❯
