bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Icons - Font Awesome

How To Add Icons

Icons can easily be added to your HTML page, by using an icon library.

Just add the name of the icon class to any inline HTML element (like <i> or <span> ).

Icons from icon libraries are scalable vectors that can be customized with CSS (size, color, shadow, etc.).

Font Awesome Icons

The code looks something like this

Read more about Font Awesome in our Font Awesome Tutorial .

Note

No downloading or installation is required!

Example

Formatted code
<!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>

Live preview

For a complete reference of all Font Awesome icons, visit our Icon Reference .

Previous

CSS Font Property

Next

CSS Icons - Bootstrap