CSS ICONS

Font Awesome is a web font containing all the icons. You’ll need to use the following CSS on the wanted element.

HOW TO ADD ICONS

The simplest way to combine 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. All the icons in the icon libraries below are scalable vectors that can be customized with CSS.

FONT AWESOME ICONS

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

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>

BOOTSTRAP ICONS

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

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>

GOOGLE ICONS

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

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>