Font Awesome is a library of scalable vector icons that can be customized with color and transparency, as well as different shapes. Icons come in two formats: SVG and Icon-Font. This article outlines how to add Font Awesome icons in HTML and CSS, for both formats.
What is Font Awesome?
Font Awesome icons are vector icons that can be used in web design. They are created using the Font Awesome toolkit, which is a free and open-source toolkit. The icons are available in several formats, including SVG, AI, EPS, and PNG.
How to Add Font Awesome Icons in HTML
Font Awesome icons are a great way to add some flare to your web page or blog. They’re easy to use and there’s a huge variety to choose from. In this article, we’ll show you how to add Font Awesome icons in HTML and CSS.
In this video tutorial, you will learn everything step by step practically. I also mentioned each code that I’ve used inside the video tutorial, So, hope you will get many new ideas from it.
First of All, you need to make a file like index.html then you need to add the basic structure of the HTML, then you need to add font awesome CD file inside the HTML document.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.cssOnce you get the file and add it to the HTML document, then you will be able to use Font Awesome on your project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="css/all.min.css" />
<title>How to Use Font Awesome Icon in HTML and CSS3</title>
</head>
<body>
<!-- Display FontAwesome Icon -->
<i class="fas fa-camera"></i>
</body>
</html>
Once you complete the above procedure, then you can add the font awesome icons to your project. I’ve mentioned the font awesome icon inside the I tag, you can check it.
<i class="fas fa-bell"></i>
<i class="far fa-bell"></i>Inside the above code have two icons, you can see the bell icons but inside the first one will see the bell with the background and the second one without the background.
<!-- Sizing fontawesome -->
<i class="fas fa-bell fa-xs"></i>
<i class="fas fa-bell fa-sm"></i>
<i class="fas fa-bell fa-lg"></i>
<i class="fas fa-bell fa-3x"></i>
<i class="fas fa-bell fa-6x"></i>
<i class="fas fa-bell fa-10x"></i>
If you want to increase the font awesome icons size, you can add the classes after the particular icon name, I’ve mentioned the above codes, and inside the codes, you can find different sizes with different classes.
<!-- Animated Icons -->
<!-- <i class="fas fa-sync-alt fa-spin fa-3x"></i>
<i class="fas fa-spinner fa-pulse fa-3x"></i>When you need to animate the icons, you can do that I’ve mentioned the above codes and also classes that help you to animate the icons such as loaders.
<ul class="fa-ul">
<li>
<span class="fa-li"><i class="fas fa-check-square"></i></span>Item
</li>
<li>
<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>Item
</li>
</ul>
If you want to add the font awesome icons inside the list item, you can use above mentioned codes to display the icons inside the list item.
<!-- <i class="fas fa-car fa-rotate-90"></i>
<i class="fas fa-car fa-rotate-180"></i>
<i class="fas fa-car fa-rotate-270"></i>
<br />
<i class="fas fa-car fa-flip-horizontal"></i>
<i class="fas fa-car fa-flip-vertical"></i> -->That’s last thing, When you will rotate the icons on your project, you can use the above-mentioned code to rotate the font awesome icons.
How to Add Font Awesome icons in CSS
Hey Guys, I’ve shared each code which use to display the font awesome icons inside the HTML document using classes. But, you can use the manual classes inside the HTML document to display the font awesome icons.
<span class="twitter">Twitter</span>
<span class="facebook">Facebook</span>
<span class="youtube">YouTube</span>Once you use the above-mentioned codes, then you need to use CSS to manage it. I’m going to share with you the codes below.
.twitter::before {
content: "\f099";
font-family: "FontAwesome";
font-weight: 400;
}
.facebook::before {
content: "\f09a";
font-family: "FontAwesome";
font-weight: 400;
}
.youtube::before {
content: "\f167";
font-family: "FontAwesome";
font-weight: 400;
color: red;
}Conclusion
We hope this article has helped you understand how to add Font Awesome icons in HTML. If you have any further questions, please feel free to post them in the comments below.
You May Also Like:
- How to Make a Website Using HTML and CSS
- What is the Difference Between HTML and CSS?
- Simple Website Using HTML and CSS with Source code
- How to Make Image Gallery in HTML and CSS3
- How to Make Navigation Bar in HTML and CSS
If you like that please share it on social sharing websites have a nice day.
