CSS Icons

How To Add Icons

First add the icon library in the webpage, then add the name of the specified icon class present in the added library to any inline HTML element like <i> or <span>.


Font Awesome Icons

Font awesome library consist of various icons of different sizes. It can be added by adding following line in the <head> section of the webpage :

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


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Awsome Icons </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/ font-awesome.min.css">
</head>
<body>
<p>Some Font Awesome icons:</p>
<i class="fa fa-heart"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-file"></i>
<p>Styled Font Awesome icons (size and color):</p>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>

Output

CSS Font Awsome Icons

Some Font Awesome icons:

Styled Font Awesome icons (size and color):


Bootstrap Icons

The Bootstrap glyphicons can be added by including following line inside the <head> section of the webpage

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


<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Icons </title>
<meta charset="UTF-8">
</head>
<body>
<p>Some Bootstrap icons:</p>
<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>
<br><br>
<p>Styled Bootstrap icons:</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
</body>
</html>

Output

Bootstrap Icons

Some Bootstrap icons:



Styled Bootstrap icons:


Google Icons

The Google icons, can be added by including following line inside the <head> section of the webpage :

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


<!DOCTYPE html>
<html lang="en">
<head>
<title> Google Icons </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts>googleapis>com/icon?family=Material+Icons">
</head>
<body>
<p>Some Google icons:</p>
<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>
<br><br>
<p>Styled Google icons :</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:24px;">cloud</i>
</body>
</html>

Output

Google Icons

Some Google icons:

cloud favorite attachment computer traffic

Styled Google icons :

cloud cloud cloud cloud cloud cloud cloud cloud











Follow Us: