A straightforward method to incorporate an icon into your HTML page is by utilizing an icon library like Font Awesome.
Simply insert the designated icon class name within any inline HTML element (such as <i> or <span>).
Icons in these libraries are scalable vectors, allowing for customization with CSS attributes like size, color, shadow, and more.
To employ Font Awesome icons, navigate to fontawesome.com, log in, and obtain a code snippet to insert into the <head> section of your HTML page.
<script src=”https://kit.fontawesome.com/yourcode.js” crossorigin=”anonymous”></script> |
Note: No downloading or installation is required!
Example
<!DOCTYPE html> <html> <head> <script src=”https://kit.fontawesome.com/a076d05399.js” crossorigin=”anonymous”></script> </head> <body> <i class=”fas fa-cloud”></i> <i class=”fas fa-heart”></i> <i class=”fas fa-car”></i> <i class=”fas fa-file”></i> <i class=”fas fa-bars”></i> </body> </html> |
Result:
To utilize Bootstrap glyphicons, simply insert the following line within the <head> section of your HTML page:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> |
No need for downloading or installation!
Example
<!DOCTYPE html> <html> <head> <link rel=”stylesheet”href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> </head> <body> <i class=”glyphicon glyphicon-cloud”></i> <i class=”glyphicon glyphicon-remove”></i> <i class=”glyphicon glyphicon-user”></i> <i class=”glyphicon glyphicon-envelope”></i> <i class=”glyphicon glyphicon-thumbs-up”></i> </body> </html> |
Result:
To incorporate Google icons, insert the following line within the <head> section of your HTML page:
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”> |
No need for downloading or installation!
Example
<!DOCTYPE html> |
Result: