Font Awesome 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>
To Include the list Icon, you should use –
<i class=”fa fa-list”></i>
Example of CSS Font Awesome Icons
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
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.
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
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
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
Other important Framework using google's material design
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 –