Loading Please Wait...
The icons can be used to improve user interaction and create interactive website. We can use any icon library like Font Awesome, Bootstrap Icons, Google Icons, etc.
Icons available in such icons library are SVG that can be easily customized such as color, size, etc.
We can download icons from their websites and then link the downloaded CSS and JS files inside <head> with <link> or <script> tag.
All the icons library provides CDN so that we can use the icons without need to download them. Include the CDN link inside <head> with <link> or <script> tag.
Each and every icons is assign a unique class name, use this class inside any inline element such as <span>, <i>, etc.
Add the below link inside <head> section.
https://use.fontawesome.com/releases/v5.15.4/js/all.js
<!DOCTYPE html>
<html>
<head>
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
</head>
<body>
<i class="fa fa-home"></i>
<i class="fa fa-user"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-phone"></i>
<i class="fa fa-heart"></i>
</body>
</html>
Add the below link inside <head> section.
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>
<body>
<i class="bi bi-house-fill"></i>
<i class="bi bi-person-fill"></i>
<i class="bi bi-envelope-fill"></i>
<i class="bi bi-telephone-fill"></i>
<i class="bi bi-heart-fil"></i>
</body>
</html>
Add the below link inside <head> section.
https://fonts.googleapis.com/icon?family=Material+Icons
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<i class="material-icons">home</i>
<i class="material-icons">person</i>
<i class="material-icons">email</i>
<i class="material-icons">call</i>
<i class="material-icons">favorite</i>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved