Loading

CSS Icons

  • CSS icons are created and styled using Cascading Style Sheets
  • They are often used in web design to add decorative or functional icons to a website without the need for image files.
  •  CSS icons have several advantages, including scalability, easy customization, and reduced page load times. 

 Icon libraries in CSS:

  •  Bootstrap icons
  •  Font Awesome icons
  •  Google icons 

It is not necessary  to install  the libraries 


Font Awesome icons

  • Font Awesome is one of the most well-known and widely used icon libraries.
  •  It provides a collection of scalable vector icons that can be easily customized and styled using CSS classes. Icons are available in both free and paid versions.
<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: lightblue;
                }

                .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:

 


Bootstrap icons

  • 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.
<link rel="stylesheet"   
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  

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: lightblue;
                }

                .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:


Google icons

  • Similar to the above libraries, we can add it to our HTML page simply by adding the link given below in the <head></head> section.
<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: lightblue;
                }

                .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: