CSS Icons

CSS Icons      

CSS icons are specified like a symbol or image used inside a computer interface assign to any element. CSS icons are the graphical depiction of any program or file that supports users to recognize the file type quickly.

It is a comfortable way of inserting icons to any HTML page by using an icon library. It is feasible to format an icon library with the use of CSS. We may customize any icon based on their size, shadow, and color.

Here we are mentioning some of the essential icon libraries like Google icons, Font Awesome icons, and Bootstrap icons that may be used efficiently inside the CSS. We don’t need to download or install these icon libraries.

Description of the above libraries is as follows:

Font Awesome icons

We have to insert a link to use font awesome icons library. This link will be defined in the <head> section, which is mentioned below:

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

Let’s take an example below:

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: lime; 
} 
.fa
{ 
color: red; 
font-size: 50px; 
margin: 10px; 
} 
</style> 
</head>  
<body style="text-align: center">  
<h1>Font Awesome Library</h1> 
      <i class= "fa fa-cloud"></i>  
      <i class= "fa fa-file"></i>  
      <i class= "fa fa-heart"></i>  
      <i class= "fa fa-bars"></i>  
      <i class= "fa fa-car"</i>  
</body>  
</html>   

Output:

CSS Icons

Bootstrap icons

Similarly, we have to insert a link inside the HTML page to use this icons library. This link will be defined in the <head> section which is mentioned below:

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: lime; 
} 
.glyphicon
{ 
color: red; 
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

Same as the above mentioned libraries, we have to insert a link inside the HTML page to use this icon library. This link will be defined in the <head> section which is mentioned below:

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

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: lime; 
} 
.material-icons
{ 
color: red; 
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>   

Output:

CSS Icons