Font Awesome is a popular icon set that contains over 1,500 icons that can be used in web development projects. These icons are vector-based, scalable, and can be customized to fit the design of any website or application.
HTML Font awesome icons
To use Font Awesome icons in a web project, you'll need to add the Font Awesome CSS file to your HTML file. You can download the CSS file from the Font Awesome website or link to it using a CDN (Content Delivery Network) placing the code in the head of your html code like this:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-m9DQmB8I+DTbLJd26tZvlx3lvVfWbJvC7+oToGrgXoe7VrW2QvB7V+FxzQLuCO8/pABJAKtTdiIzgR2QX0JtPg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
Once the CSS file is included in your HTML file, you can use Font Awesome icons by adding the appropriate HTML code to your page. For example, to display the "thumbs-up" icon, you can use the following code:
<i class="fa fa-thumbs-up"></i>
| Icon | Code | Icon | Code |
|---|---|---|---|
| fa fa-address-book | fa fa-camera | ||
| fa fa-envelope | fa fa-search | ||
| fa fa-thumbs-up | fa fa-trash | ||
| fa fa-user | fa fa-umbrella | ||
| fa fa-star | fa fa-globe | ||
| fa fa-heart | fa fa-money | ||
| fa fa-money | fa fa-gamepad | ||
| fa fa-clock-o | fa fa-map-marker | ||
| fa fa-book | fa fa-briefcase | ||
| fa fa-cloud | fa fa-coffee | ||
| fa fa-cutlery | fa fa-database | ||
| fa fa-desktop | fa fa-adjust | ||
| fa fa-heart | fa fa-home | ||
| fa fa-laptop | fa fa-map-marker | fa fa-pencil | fa fa-phone |
| fa fa-picture-o | fa fa-plane | ||
| fa fa-power-off | fa fa-shopping-cart | ||
| fa fa-soccer-ball-o | fa fa-star | ||
| fa fa-stethoscope | fa fa-sun-o |
×