Definition:
CSS Icons play an important role in your webpage which makes your web page look more professional and elegant. It is very easy to use CSS Icons on your web page from icon libraries like Font Awesome Icons, Bootstrap Icons, or Google Icons.
Let’s see each CSS icon uses with examples.
1) Font Awesome Icons
You can use the font-awesome icons with a single code. The step is pretty simple and easy. First of all, you need to visit the Font Awesome Icons Site which is www.fontawesome.com, create an account, and get a code of the icons you need to use. Apply the font awesome code in the header section
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">and your icons where ever you needed.
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-thumbs-up" aria-hidden="true"></i>Source Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>
<i class="fa fa-calculator" aria-hidden="true"></i>
<i class="fa fa-bus" aria-hidden="true"></i>
<i class="fa fa-comment" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-tags" aria-hidden="true"></i>
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</body>
</html>
Output:
Here, you will see the list of available Font Awesome Icons.
2) Bootstrap Icons
Like Font Awesome Icons, you need to add a bootstrap Icons script into the head section of your page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">and the icon’s code wherever you needed.
<i class="bi bi-search"></i>
<i class="bi bi-check-circle"></i>
<i class="bi bi-x-diamond"></i>
<i class="bi bi-book"></i>
<i class="bi bi-calendar-day"></i>Source Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
<i class="bi bi-search"></i>
<i class="bi bi-check-circle"></i>
<i class="bi bi-x-diamond"></i>
<i class="bi bi-book"></i>
<i class="bi bi-calendar-day"></i>
</body>
</html>
Output:
Here, you will see the list of available Bootstrap Icons.
3) Google Icons
To use Google icons on your webpage, use the Google icons script inside your Html <head>.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">and use your Google icons wherever you needed.
<i class="material-icons">backup</i>
<i class="material-icons">home</i>Source Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">assignment_ind</i>
<i class="material-icons">backup</i>
<i class="material-icons">highlight_off</i>
<i class="material-icons">home</i>
<i class="material-icons">info</i>
</body>
</html>
Output:
Here, you will see the list of available Google Icons.