CSS Icons

Font Awesome Icons

Bootstrap Icons

Google Icons

There are 2 ways to add Icons –

Add a 3rd party Icons Library like Font Awesome, Bootstrap Icons or Google Icons.
Download Icons on your website from a 3rd party like Font Awesome, Bootstrap Icons or Google Icons and use them on your website.
Create your own Icons and add them directly on your website.

The 1st Option is the best and easiest way to add Icons.

A 2nd option is also a good option but it makes your website little heavy.

The 3rd option is recommended only when you want you to use your own custom Icons.

1. Font Awesome Icons

Font Awesome Icons are the most popular Icons.

If you wish to use Font Awesome Icons, the best way is to include the external CSS file of Font Awesome Icons in the section of your HTML document.

In the example below, we have to set some styles for the Icons like font-size (to increase the size of the Icon), margin (to create space around the icons), etc and these are optional.

The Syntax to include Font Awesome Icons:
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

The Syntax to use the class of a particular Font Awesome Icon:
<i class=”fa fa-related-icon”></i>

For Example:
To Include the list Icon, you should use –
<i class=”fa fa-list”></i>

Example of CSS Font Awesome Icons

<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style>
  #icon1 {
   font-size: 50px; 
   margin:10px;
  }
  
  #icon2 {
   font-size: 50px; 
   margin:10px; 
   color: crimson;
  }
  
  #icon3 {
   font-size: 50px; 
   background:black; 
   padding:5px; 
   margin:10px; 
   color: dodgerblue;
  }
  h4{font-family: georgia;}
 </style>
</head>

Font Awesome Social Media Icons

Let us use the Font Awesome Icons to use the Social Media Icons like Facebook, Twitter, Pinterest, etc.

Example of Font Awesome Social Media Icons

<i class="fa fa-instagram" ></i>Instagram Icon<br>
<i class="fa fa-facebook"></i>Facebook Icon<br>
<i class="fa fa-facebook-official"></i>Facebook Official Icon<br>
<i class="fa fa-twitter"></i>Twitter Icon<br>
<i class="fa fa-twitter-square"></i>Twitter square Icon<br>
<i class="fa fa-youtube"></i>YouTube Icon<br>
<i class="fa fa-youtube-play"></i>YouTube Play Icon<br>
<i class="fa fa-youtube-square"></i>YouTube Square Icon<br>
<i class="fa fa-whatsapp"></i>Whatsapp Icon<br>
<i class="fa fa-linkedin"></i>LinkedIn Icon<br>
<i class="fa fa-linkedin-square"></i>LinkedIn Square Icon<br>
<i class="fa fa-pinterest"></i>Pinterest Icon<br>
<i class="fa fa-pinterest-p"></i>Pinterest P Icon<br>
<i class="fa fa-pinterest-square"></i>Pinterest Square Icon<br>
<i class="fa fa-skype"></i>Skype Icon

Note/Info/Success To change the size of the Icons, you can either-
a) Use CSS properties like Font-size. The above examples use this property.
b) Use inbuilt classes if Font Awesome Icons which is discussed below-

Use these Inbuilt classes of Font Awesome Icons to change the size of the Icons –

fa-xs – Decreases the icon Size relative to its container. xs stands for Extra small.
fa-sm – Decreases the icon Size relative to its container. sm stands for small.
fa-lg – Increase the icon Size by 33% relative to its container. lg stands for large.
fa-2x – Increase the icon Size by 2X.
fa-3x – Increase the icon Size by 3X.
fa-4x – Increase the icon Size by 4X.
fa-5x – Increase the icon Size by 5X.

Similarly, you can code fa-6x, fa-7x, fa-8x etc.

Font Awesome 4 uses prefix as fa while Font Awesome 5 uses the prefix fas.

Example of different types of List Icons with inbuilt font sizes.

<i class="fa fa-list"></i> List Icon<br>
<i class="fa fa-list-ol"></i> Ordered List Icon<br>
<i class="fa fa-list-ul"></i> Unordered List Icon<br>
<i class="fa fa-list-alt"></i> List alt Icon

2. Bootstrap icons

If you wish to use Bootstrap Icons, the best way is to include the external CSS file of Bootstrap Icons in the <head> section of your HTML document.

The Syntax to include the Bootstrap icons:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

Example of Bootstrap Icons

<i class="glyphicon glyphicon-home"></i> Home Icon<br>
<i class="glyphicon glyphicon-phone"></i> Phone Icon<br>
<i class="glyphicon glyphicon-music"></i> Music Icon<br>
<i class="glyphicon glyphicon-trash"></i> Trash Icon<br>
<i class="glyphicon glyphicon-book"></i> Book Icon<br>
<i class="glyphicon glyphicon-camera"></i> Camera Icon

CSS Search Box With Bootstrap Icons

Search Box is a good option for the user to search a particular content, item or product.

A Search Icon adds more value to it.

Let us see how we can create it.

Example of Search Box With Bootstrap Icons

<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <style>
  .search-box {
   width: 200px;
   position: relative;
   left:20px;
  }
 
  .searchtext {
   padding: 15px;
   height: 20px;
   border-radius: 5px;
   outline: none;
   float: left;
   width: 100%;
   border: 3px solid crimson;
  }
 
  .search-btn {
   position: absolute;  
   right: -30px;
   width: 40px;
   height: 36px;
   border: 1px solid crimson;
   background: crimson;
   text-align: center;
   color: #fff;
   border-radius: 5px;
   cursor: pointer;
   font-size: 18px;
  }
 </style>
</head>

3. Google Font Icons

Google Icons are based on the material design of Google. This is the most famous material icons library.

The Syntax CSS Google Font Icons:
background: linear-gradient(to top left, comma separated color stops) ;

Example of CSS Google Font Icons

<i class="material-icons">android</i> Android Icon<br>
<i class="material-icons">book</i> Book Icon<br>
<i class="material-icons">delete</i> Delete Icon<br>
<i class="material-icons">home</i> Home Icon<br>
<i class="material-icons">timeline</i> Timeline Icon

Other important Framework using google's material design

There is an excellent modern responsive CSS Framework which is based on Material Design by Google. This framework is called as Materialize CSS.

We are not going to discuss Materialize CSS here but If you want to learn this framework in detail, the official website of Materialize CSS is here.

CSS Search Box With Icons

We are going to see the Search Box using Font Awesome Icons and Google Icons.

You can use any one of these –

Example of Search Box With Icons

<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <style>
  .search-box {
   width: 200px;
   position: relative;
  }
 
  .searchtext {
   padding: 5px;
   height: 20px;
   border-radius: 5px;
   outline: none;
   float: left;
   width: 100%;
   border: 3px solid crimson;
  }
 
  .search-btn {
   position: absolute;  
   right: -50px;
   width: 40px;
   height: 36px;
   border: 1px solid crimson;
   background: crimson;
   text-align: center;
   color: #fff;
   border-radius: 5px;
   cursor: pointer;
   font-size: 18px;
  }
 </style>
</head>