CSS Fontawesome Icons
CSS
Font Awesome is an icon library and it provides scalable vector graphics that can be styled using standard CSS properties.
Font-Awesome Icons
➔ Font Awesome is a popular font and icon toolkit based on CSS and SVG.
➔ Font Awesome uses inline elements to apply styles.
➔ Typically, the <i> and <span> elements are widely used for icons.
➔ Apply CSS styles to the container to change the style of the icon.
How to use Font-Awesome Icons :
1. Installation Font-Awesome Font:
- Method 1 (Font Awesome Kit, Recommended):
- Method 2 (CDN CSS-only link):
- Method 3 (Self-Hosting, need to download and reference to head using link tag.):
Create a kit on the Font Awesome website to get a unique script tag to paste into your HTML head tag. Here is a sample script. Original script will be unique.
<head>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.0/js/all.min.js"></script>
</head>
To load Font Awesome via CSS without JavaScript, you can use a CSS-only link.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
</head>
Download Font Awesome, copy the required CSS and webfonts folders to your project directory, link the local CSS file in the head section of the HTML document.
<head>
<link rel="stylesheet" href="path-to-fontawesome/css/all.min.css">
</head>
2. Adding Icons to HTML using container.
Check out the icons you need from here. Search fontawesome Icons
Example
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
</head>
<body>
<p>Fontawesone Icons Example</p>
<i class="fa-solid fa-car fa-lg"></i>
<i class="fa-solid fa-car fa-2x"></i>
<i class="fa-solid fa-car fa-3x"></i>
<i class="fa-solid fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i><br>
<i class="fa-solid fa-home fa-lg"></i>
<i class="fa-solid fa-home fa-2x"></i>
<i class="fa-solid fa-home fa-3x"></i>
<i class="fa-regular fa-home fa-4x"></i>
<i class="fa-regular fa-home fa-5x"></i><br>
<span class="fa fa-gear fa-lg"></span>
<span class="fa fa-gear fa-2x"></span>
<span class="fa-solid fa-gear fa-3x"></span>
<span class="fa-solid fa-gear fa-4x"></span>
<span class="fa-solid fa-gear fa-5x"></span>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
3. Apply CSS styles to Font-Awesome Icons using container.
Example
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
</head>
<body>
<p>Font-awesone Icons Example</p>
<i class="fa-solid fa-car fa-lg"></i>
<i class="fa-solid fa-car fa-2x"></i>
<i class="fa-solid fa-car fa-3x"></i>
<i class="fa-solid fa-car fa-4x"></i>
<i style="color:red;" class="fa fa-car fa-5x"></i><br>
<i class="fa-solid fa-home fa-lg"></i>
<i style="color:red;" class="fa-solid fa-home fa-2x"></i>
<i class="fa-solid fa-home fa-3x"></i>
<i style="color:red;" class="fa-regular fa-home fa-4x"></i>
<i class="fa-regular fa-home fa-5x"></i><br>
<span class="fa fa-gear fa-lg"></span>
<span class="fa fa-gear fa-2x"></span>
<span class="fa-solid fa-gear fa-3x"></span>
<span class="fa-solid fa-gear fa-4x"></span>
<span style="color:red;" class="fa-solid fa-gear fa-5x"></span>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Google Font and Font-Awesome Icons
- Google Font
- Google Fonts provides a vast, free library of over 1,000 open-source font families for text typography, optimized for web performance and readability.
- Google Fonts are used to style text in headings, body text, and paragraphs.
- Font-Awesome Icons
- Font Awesome is a specialized toolkit that provides thousands of vector icons and logos for user interfaces.
- Font Awesome is used to add icons such as logos and UI symbols.