/    /  CSS icons

CSS icons

 

Icons can be defined as images or symbols. It is a graphical representation of a document(file) or program that helps the user to identify the type of file quickly.

 

Font Awesome icons:

 

 We need to add this link within the <head></head> section.

 

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

 

Example:

 

<!DOCTYPE html>
<html>

<head>
<title>CSS Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
text-align:center;
background-color:#bfbfbf;
}
.fa{
color:#003366;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Font Awesome Library</h1>
   <i class="fa fa-car"</i>
   <i class="fa fa-cloud"></i>
   <i class="fa fa-file"></i>
   <i class="fa fa-heart"></i>
   <i class="fa fa-bars"></i>      
</body>
</html>

 

OUTPUT:

 

CSS icons

 

Bootstrap icons:

 

We need to add this link within the <head></head> section.

 

Example:

 

<!DOCTYPE html>
<html>

<head>
<title>CSS Icons</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body{
text-align:center;
background-color:#bfbfbf;
}
.glyphicon{
color:#660066;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Bootstrap icons</h1>
      <i class="glyphicon glyphicon-cloud"></i>
      <i class="glyphicon glyphicon-file"></i>
      <i class="glyphicon glyphicon-heart"></i>
      <i class="glyphicon glyphicon-user"></i>
      <i class="glyphicon glyphicon-thumbs-up"></i>
      <i class="glyphicon glyphicon-remove"></i>
      <i class="glyphicon glyphicon-envelope"></i>      
</body>
</html>

 

OUTPUT:

 

CSS icons

 

Google icons:

 

We need to add this link within the <head></head> section.

 

Example:

 

<!DOCTYPE html>
<html>

<head>
<title>CSS Icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body{
text-align:center;
background-color:#ccffcc;
}
.material-icons{
color:#cc3300;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Google icons</h1>
    <i class="material-icons">cloud</i>
    <i class="material-icons">attachment</i>
    <i class="material-icons">computer</i>
    <i class="material-icons">favorite</i>
    <i class="material-icons">traffic</i>   
</body>
</html>

 

OUPUT:

 

CSS icons