CSS Icons

CSS Icons 

Icons are used to make a web page attractive and easily readable.

Icons are nothing but graphic images.

We can easily add icons to the html web page using various icon libraries 

For example there are readymade icon libraries available on the internet like  -   Orion Icon Library etc.

We can use <i> tag or <span> tag for icons.

But the most commonly used ways are given as follows - 

1. Using Bootstrap icons,
2. Using Google icons.

We will see both of them down below - 

1. Using Bootstrap icons - 

To use bootstrap icons firstly we have to link the bootstrap to our HTML page. 

We do not need to download to install anything to use bootstrap icons.

We can do so by pasting the following link in the head tag.

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

And after linking this we can use bootstrap calles in <i> tag like this -

<i class="bi-alarm"></i>

Where “bi” stands for bootstrap and them class name like in this  case “alarm”

Now we will see Example - 

Example - 

Output - 

2. Google icons 

To use google icons past the following link in the head tag

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

Now we will see Example - 

Example - 

Output -