Font Awesome

Loading...

From the course by University of Michigan

Web Design for Everybody Capstone

224 ratings

University of Michigan

Web Design for Everybody Capstone

224 ratings

Course 5 of 5 in the Specialization Web Design for Everybody (Basics of Web Development and Coding)

The capstone will develop a professional-quality web portfolio. Students will demonstrate the ability to design and implement a responsive site for a minimum of three platforms. Adherence to validation and accessibility standards will be required. The evolving student implementations will be reviewed each week by capstone peers and teaching assistants to make sure that the student keeps up with the agenda of the course. Upon completion of this course students will feel comfortable creating and/or updating existing front-end sites, utilizing existing frameworks, and testing sites for accessibility compliance. This course is only open to students who have completed the first four courses in the Web Design for Everybody specialization: Introduction to HTML5, Introduction to CSS3, Interactivity with JavaScript, and Advanced Styling with Responsive Design.

From the lesson

Week Three: Review and Preparation Phase

This week you will continue to review your fellow students designs. Feedback will be based on layout, proposed content, and accessibility. The goal is that these peer reviews will inspire you to attempt something more on your site (or provide the feedback that lets you know you may want to scale down your own expectations.) You will begin to create the content of your site as you wait for the reviews of your project to be created.

Sticky Footers10:24

Embedding a Google Calendar5:03

Using Bootstrap to Add a Carousel7:18

Adding a Lightbox Plugin5:56

Font Awesome5:57

Meet the Instructors

Colleen van Lent, Ph.D.
Lecturer
School of Information
Charles Severance
Associate Professor
School of Information

Hi everybody!

One of the things that I really struggle with when I'm trying to come up

with example webpages are the graphics.

Because, one, I'm not a very good artist myself, and two, I'm always a little bit

worried about what I'm allowed to use and what I'm not allowed to use.

One of the things I noticed is that a lot of people on a lot of sites

use these really cool icons, so

I wanted to find out where do they get them from and how do they work.

And what I discovered is something called Font Awesome.

So what you get with Font Awesome

is a whole set of these downloadable icons that are really well done.

They scale really large or very small,

they can be customized with different CSS, you don't need JavaScript to use them.

In general, they're a very cool tool that you might want to learn how to use.

To get started, you would simply go to the Font Awesome website.

When you get there, there's a Get Started, or sorry, there's a Start Navigation

that talks about the different ways that you can use Font Awesome.

The two that you're already familiar with are to,

one, download the code and just keep it locally on your own computer or server.

Or second, you can give them your email and

they'll send you a link to a CDN or Content Delivery Network.

We did this same thing with Bootstrap where using a link

you don't need to keep track of the code, they'll do it for you.

So once you decide if you're going to use Font Awesome,

which way you want to connect to it, I want to show you some easy and

cool ways that you can incorporate it into your page.

Let's get started by looking at the Cheatsheet.

The Cheatsheet is simply a list of all the different type of icons available.

I believe, right now, there are over 365.

Of course, you can't really see them, because it's small on my screen.

So let's go ahead and put some of them in a file and run it.

Over here in my code, I've done the usual making my metadata.

I linked to the copy of font awesome that I have on my computer.

And then down here,

the classic way to always set up your font awesome icons is to use the i tag.

It's simply i, and then inside the class, you always include fa, for font awesome,

and then from there, you have your choice of different icons you use.

So in this case, I'm simply going to do the bus icon.

Let's take a look.

When you go over here, you can see that the icon provided is this little bus.

Let me add two or three more.

If I go right here, I also have a calendar,

a calculator, and let's add a bullseye as well.

When I refresh the page, you can see I now have four icons that look really cool.

If I make the screen bigger or smaller,

or actually if I zoom in or out, you can see that they scale really well.

Now, one of the things you might want to do

is still customize these icons to your particular page.

You can do that using additional classes or using CSS.

So, for instance, I can include fa-3x would mean make this three times as big.

So let's look at the calculator before, and then afterwards.

Another thing we can do is actually go in and write rules for

these different classes.

So, in this case, I've gone in and I've said, hey, for the bus and

the calculator I want you to make those green.

But for the bullseye, I want you to make it red and,

hey, let's also play with the opacity, kind of fade it out a little bit.

Let's see how this looks when I add it to my HTML.

Here we go.

I'm going to refresh and

you can see that these ones are green, the one at the bottom is a very faded out red.

So you can see that there's a lot of cool things you can do

either with the Font Awesome classes or with your own CSS.

So, I'm going to end on one last example that I really

like which is one of the spinners.

So, in this case, I am using a lot more classes.

But by now, I am hoping that doesn't intimidate you.

You're telling it we are going to use something from Font Awesome,

it's going to be a refresh.

I want it to spin.

I want it to be three times as big.

And to be completely honest, I don't even remember what the fa-fw does,

so as a learning exercise, you can kind of go look it up.

And what we have afterwards is saying, hey, I want you to show this loading.

So let's see how this looks now on our final Font Awesome example.

You can see we now have this kind of really cool

loading gif that you can have for your page.

If you decide to later, what you can do is you can incorporate this with some

JavaScript or different things so that you only have the loading icon sometimes, or

it can run for a few seconds between each page.

In general, adding these little tiny classes and

using these tools is going to make the difference for

your page looking kind of novice towards making it look more and more professional.

So, go ahead, maybe use this as one of your extras and

have some fun looking at the different things you can add to your page.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play