Pure CSS Icons

Now a days icons are widely used in the web project. It makes the website too elegant and attractive. Pure CSS supports different types of icon libraries.

  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

How To Use Icon Library

First of all, include CDN link inside the project. Keep in minds that every icon has predefined class. So, select the specific icon class and add into <i> element base class. For example:

Icon's Use
 
    <i class="glyphicon glyphicon-cloud xsmall"></i>
    <i class="glyphicon glyphicon-cloud small"></i>
   

CDN: Path

Font Awesome :

  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
   

Bootstrap :

  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   

Google Material :

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

General Syntax

      <i class="material-icons xsmall">cloud</i>
<i class="glyphicon glyphicon-cloud small"></i>
    
Try it now

Source Code

          
            <h3>Bootstrap Icons</h3>
<i class="glyphicon glyphicon-cloud xsmall"></i>
<i class="glyphicon glyphicon-cloud small"></i>          
        
Try it now

Source Code: Output

Bootstrap Icons

Web Tutorials

Pure CSS Icons
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4