CSS Icons

Icons can be defined as the images or symbols used in any computer interface refer to an element. It is a graphical representation of a file or program that helps the user to identify about the type of file or content they are referring to.

Using the icon library is the easiest way to add icons to our HTML page. It is possible to format the library icons by using CSS. We can customize the icons according to their color, shadow, size, etc.

There are given some of the icon libraries such as Bootstrap icons, Font Awesome icons, and Google icons that can be used in CSS easily. There is no need to install or download the libraries mentioned above. We just need to add its path into <link> tag.


Font Awesome Icons

To use this library in our HTML page, we need to add the following link within the <head></head> section.

Input:-

Index.html
	
<!DOCTYPE html>
<html>
   <head>
      <title>This page title</title>
      <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>
   </body>
</html>

Style.css
.fa{  
    color: teal;  
    font-size:50px;  
    margin:10px;  
}

Output:-


Bootstrap Icons

As similar to the font awesome library, we can add the bootstrap icons in our HTML page using the link given below in the <head></head> section.

Input:-

Index.html
	
<!DOCTYPE html>
<html>
   <head>
      <title>This page title</title>
      <link rel="stylesheet"   
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   </head>
	  <body>
      <i class="glyphicon glyphicon-user"></i>   
      <i class="glyphicon glyphicon-thumbs-up"></i>   
      <i class="glyphicon glyphicon-remove"></i>   
	  </body>
</html>

Style.css
.glyphicon{  
     color:teal;  
     font-size:50px;  
     margin:10px;  
}

Output:-


Google Icons

As similar to the above libraries, we can add it in our HTML page simply by adding the link given below in the <head></head> section.

Input:-

Index.html
	
<!DOCTYPE html>
<html>
   <head>
      <title>This page title</title>
	     <link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons"> 
   </head>
	  <body>
      <i class="material-icons">attachment</i>   
      <i class="material-icons">computer</i>   
      <i class="material-icons">favorite</i>	  
	  </body>
</html>

Style.css
.material-icons{  
      color:teal;  
      font-size:50px;  
      margin:10px;  
}

Output:-