As you can see here from the finished version, you can see that we have this little phone icon here and we have a map icon. Those are, even though they look like images, they're actually just fonts. They're just characters that we can use.

That makes them very helpful because you're able to treat them like fonts, which means they scale up as big as you want, they don't get pixelated or distorted and they worked quite nicely for that. Now to bring Font Awesome in, just start typing in font awesome into Google, and then it'll take you right to FontAwesome.com.

Depending on the version that you are using, then you may have some slight differences, some slight variations, but for the most part, you should be able to use exactly the same workflow that I'm showing right now.

If you click on start using here, this is going to give you whatever you need in order to import font awesome into the website. What we're going to be doing is we're actually going to be pulling in a CSS file provided by Font Awesome.

When we do that, we'll have access to their full free library. They also have a paid version, but we're just going to use the free one, so you can click on the little copy code icon here.

Then if you switch back, and go to the index.html. Now, this is very important. You need to make sure that you are putting this above the styles. I'm going to paste that in and hit save.

The reason for that is because we're not going to do it in this course but I don't want you to be confused in a different project. If you ever call any of the icons from the CSS file, because of the cascading nature of CSS, you need to make sure that you're importing at above whatever file you're going to use.

We're going to be calling it directly in the HTML though, so you could technically put it anywhere. Just as a best practice, you always want to make sure your fonts are above your style sheet calls. Now that we have that, let's see if we can actually get this working.

Now I'm going to go to Font Awesome and you can go search for icons. I'm just going to type in phone and you can see that we have all kinds of different icons. If they are darkened, that means that they're in the free version. If they're lightened and they're kind of grayed out, that means they are in the paid pro version.

Just click on this phone volume icon. This is going to show you all kinds of different variations and different things like that, which is helpful. The way that we're going to import it is it actually gives us the HTML code right here.

It gives us an icon tag which is represented with the i and then it has a specific class. The way that this works is pretty cool. It is connected directly into that CSS file that we imported.

That CSS file from font awesome that we just put in the index.html file, what this is going to do is when the webpage finds this icon with the class of fas fa-phone-volume, it's going to look to see if there is any spot where these classes are defined and it's going to find them.

Then it's going to render this icon on the page. To get this working, just click on copy code.

Then go back to the homepage and open up the text editor. Now inside of contact-hours-wrapper here, let's go and let's place in that code. We're still going to do some work and we're going to add some more divs to organize this properly, but for right now, let's just put it right next to each other.

Hit save and hit refresh over here. You can see we have our little icon there. Now we'll style it and we'll make it look good, but that gives us exactly what we want.

That means that we have one, we've imported Font Awesome properly and two, we have called it correctly. Now that we have that, there's one other icon, this little map icon, so let's come back over here and search for a map.

There you go, you can see it right here. It's called map marker alt or short for alternative. Let's copy this.

We're going to do the exact same thing down here just to make sure that we can call it inside of our address-wrapper.

Hit save and hit refresh and there you go. We have our little font awesome icon for the map.

Now we're going to learn how we can move it and arrange it properly. We're going to use some other divs and CSS classes to do that, but for right now, we have now successfully brought in Font Awesome and now we can use their full library of icons.

Updates

<i class="fa-solid fa-phone-volume"></i>
<i class="fa-solid fa-location-dot"></i>

Resources

• FontAwesome.com