Lesson 20 Font Awesome

This lesson will be our bridge into styling. Search Font Awesome. It should take you to fontawesome.com. It’s a website that provides icons that you may find handy for your website. I’ve used it for things like checkmarks and the information icons. (Can you picture a little circle with an i in it or a question mark?)

Click on the menu item that says “free.” Before you can use one of the icons there, you need to tell your code to use it. Copy the link right below into your HEAD tag. You’ll see that it says “stylesheet.” You are telling it to find what it needs at their website.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”&gt;

Search the free icons for the symbol you might want. They’ve recently added a paid version which stinks, but the basics are all still there and still useful.

Click on an icon you are interested in. At the top of the page there is some code that looks like this <i class=“fas fa…”></i>  Click on that code to copy it.

Copy that into your website code where you want it to show up on your page.

It will show up as a block element. You can save your code and check it out.

You can change the icon <i> tag into a span tag to put it next to another element on the page. Leave the rest of the code intact. Save your code and check out your site.

We’ve learned about IDs. Classes are similar. An ID is unique. We use fingerprints to ID people because they are unique. We have ID cards that are unique to us with our names and pictures on them. Classes are used when a lot of things will be the same. Think of a classroom of students. They all have the same teacher and are all learning the same thing. They are in the same grade.

I used ID on my country names in my last example because when the user clicks on Macedonia, I want the code to take them to Macedonia on the page. The label had to be unique to Macedonia.

However, maybe I want the country name to turn red when I hover my mouse over it. I don’t want to tell that to happen for each country name. I want to tell the browser to do it for all the country names. If I label them each as the same class, then I can tell “class country,” or whatever I name it, to turn red when the mouse is on it. It’s like the difference between adding and multiplying. You could add 3 + 3 + 3 + 3 + 3 + 3 + 3 + 3 + 3, but it’s a lot faster to think 3 x 9 = 27.

You can watch a video of what this looks like. The Font Awesome site has changed some, so you’ll need to use the link I give you on this page.