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>

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

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4