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: