Hey everyone. Welcome to today’s tutorial. In today’s tutorial, you will learn how to use font awesome icons on Pseudo elements – ‘before’ and ‘after’.
In the previous tutorial, we learned how to add font awesome icons to our webpage. Adding font awesome icons to our webpage was simple. However, adding these icons to the pseudo-elements can be a bit tedious. But with this tutorial, I will guide you with simple and easy steps.
Video Tutorial:
If you are interested to watch a video tutorial instead of reading this blog post, you can check out the video below. I post new tips, tricks and tutorials every alternate day. Hence subscribe to my youtube channel, where
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – ‘Font Awesome Icons’. Inside this folder, we have two files. The first file is index.html which is the HTML document, and the next file is style.css which is the stylesheet.
HTML:
We begin with the HTML file. First, we copy the CDN for font-awesome icons and paste it into the head tag. Now copy the code below and paste it into your HTML document.
The HTML code consists of a div with class – ‘container’. This div is to centre and position the icons. Inside this div, we have two divs with a common class name – ‘icon’ and individual class names – ‘icon-1’ and ‘icon-2’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Font Awesome Icons On Pseudo Elements</title>
<!-- Font Awesome Icon CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="icon icon-1"></div>
<div class="icon icon-2"></div>
</div>
</body>
</html>
CSS:
We now go to the CSS code. Copy the code provided to you below and paste it into your stylesheet. Remember the following rules.
- You can only use free icons unless you have a font awesome pro license.
- Paste the Unicode of icons of your choice preceded by a ‘\’.
- For Solid Icons and Regular icons we set the font-family to – ‘Font Awesome 6 Free’.
- For Solid Icons, we set the font-weight to – 900.
- And for Regular Icons, we set the font-weight to – 400.
/* For Solid Icons */
.icon-1 {
position: relative;
}
.icon-1:before,
.icon-2:before {
font-size: 150px;
}
.icon-1:before {
font-family: "Font Awesome 6 Free";
content: "\f64f";
font-weight: 900;
color: #1b9cfb;
}
/* For Regular Icons */
.icon-2 {
position: relative;
}
.icon-2:before {
font-family: "Font Awesome 6 Free";
content: "\f587";
font-weight: 400;
color: #fa0167;
}
/*Just for styling purpose*/
body {
margin: 0;
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
That’s it for this tutorial. You can go ahead and customize these icons by changing the color or font-size.
If you face any issues while creating this code you can download the source code by clicking on the – ‘Download Code’ button below. Also if you have queries, suggestions or feedback you can comment below.
Happy Coding!
