Blog

CSS Icons | CSS Icons With Code – Codewithrandom

CSS Icons | CSS Icons with code – codewithrandom

CSS Icons

We can add icons to our HTML page by using icon libraries such as Font Awesome, Bootstrap Icons and Material Icons by Google.

To add icons we should use HTML inline elements e.g. <span> or<i>.

Font Awesome Icons

To use Font Awesome icons we need to include the library to our HTML page using the <link> tag with its href attribute containing the <url> of the library.

The <link> tag should be inside the <head> element.

 <!DOCTYPE html>  
 <html>  
 <head>  
   <title> Try It Yourself </title>  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />  
 </head>  
 <body>  
   <i class="fa fa-android"></i>  
   <i class="fa fa-anchor"></i>  
   <i class="fa fa-save"></i>  
   <i class="fa fa-file"></i>  
   <i class="fa fa-warning"></i>  
   <i class="fa fa-heart"></i>  
   <p><b> Note! </b> This demo requires internet connection. </p>  
 </body>  
 </html>

Find all free Font Awesome icons here: Font Awesome Icons

Bootstrap Icons

To use Bootstrap icons we need to include the library (it’s a CSS library) to our HTML page using the <link> tag with its href attribute containing the <url> of the library.

The <link> tag should be inside the <head> element.

 <!DOCTYPE html>  
 <html>  
 <head>  
   <title> Try It Yourself </title>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />  
 </head>  
 <body>  
   <i class="glyphicon glyphicon-ok"></i>  
   <i class="glyphicon glyphicon-arrow-left"></i>  
   <i class="glyphicon glyphicon-arrow-right"></i>  
   <i class="glyphicon glyphicon-eye-close"></i>  
   <i class="glyphicon glyphicon-warning-sign"></i>  
   <i class="glyphicon glyphicon-wrench"></i>  
   <p><b> Note! </b> This demo requires internet connection. </p>  
 </body>  
 </html>

Find all Bootstrap’s icons here: Bootstrap’s Icons

Material Icons

To use Material Icons we need to include the library (it’s a CSS library) to our HTML page using the <link> tag with its href attribute containing the <url> of the library.

The <link> tag should be inside the <head> element.

 <!DOCTYPE html>  
 <html>  
 <head>  
   <title> Try It Yourself </title>  
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />  
 </head>  
 <body>  
   <i class="material-icons">favorite</i>  
   <i class="material-icons">android</i>  
   <i class="material-icons">face</i>  
   <i class="material-icons">done</i>  
   <i class="material-icons">description</i>  
   <i class="material-icons">grade</i>  
   <p><b> Note! </b> This demo requires internet connection. </p>  
 </body>  
 </html>

Check it more




Leave a Reply