Original subtitles

So let's now learn how to use icons in

our design using HTML and CSS.

So as we just learned,

the first thing we need to do when we want to work with

icons is to actually choose an icon pack.

Now, as I said, there are many,

many free icon packs available, and in this project,

we are going to use these ones here.

So called Heroicons,

which are available heroicons.com and the link as always

can also be found on my resources page.

Now, as it says here, this is a pack of SVG icons.

So just as I mentioned, also in the last lecture,

SVG is a format that can scale indefinitely.

And so SVG icons are always a good choice.

So you see that this pack consists of 230 icons,

and it contains both icons with the outline style and then

also the same icons, but in a solid style.

So for example, here,

this annotation icon here is what

it looks like just with lines.

And here is the solid version and that's even easier to see

with these ones here, so if you compare them,

it's very apparent that the solid one

looks quite different than the outline one and different

styles have different places in different designs.

So just as we learned also in the last lecture, now,

if we analyze these icons,

we see that they are actually quite round.

So while the typography that we have here on our page is

actually a bit boxy or squared.

So it's not really rounded,

but these icons are quite simple to use.

And so that's the main reason why I'm using them now for

this project, so it's mainly for demonstration purposes,

even though these icons might not be the perfect fit in

terms of design,

but actually as you will see,

they actually still look quite good.

All right, now in practice,

there are multiple ways of using SVG icons in HTML.

One of them is to download actual SVG files and then

incorporate them into the HTML, just like regular images,

however, that has a couple of limitations.

And so the easiest way is to actually just copy the SVG code

and that works because SVG is actually just code.

So it's actually a similar specification to HTML,

but basically to describe designs.

So I'm not going to go into what SVG actually is.

We just wanted to use it here.

And so the first thing that we want to do now is to create

some feature blocks here.

So right here.

So remember how I said that probably the common use case for

icons is to create feature blocks.

So where we have an icon like here at the top,

then some heading and then some description.

And so that's exactly what we will do now.

So this first one here is about science.

So let's look for an icon that basically describes science.

And here on this site, we can actually search science.

And so this one actually looks quite nice.

So let's click here on copy SVG, all right.

Then in our HTML and now the window is very narrow,

but we can still see it I think.

So here we have this container,

which is the grid-3-cols, which has all of this here.

And then we have three divs, and each of them is now a

feature, right?

So here we have this title and then in there,

we have the actual text.

And so let's put the icon first before this title right

here, paste it.

And so this is what the SVG code looks like for that

particular icon, give it a save and there it is.

And of course that's completely oversized.

And so we can actually now,

go ahead and format this SVG I can using CSS.

So let's give it a nice class.

It comes with this default here, which is not really useful.

So let's call it feature icon.

Okay.

And this class needs to be right here inside

of the SVG element.

So again, as I mentioned,

SVG is basically just a way of describing graphical

elements, such like this icon here.

So SVG is still an element in HTML and it has an opening tag

and a closing tag.

And inside of it in this case is a path element,

which has like all of these coordinates,

which describe exactly what this icon should look like.

All right. Of course we never write this by hand.

So we just copied this icon from our icon pack.

Great, but anyway,

let's now use this class that we added to this SVG element,

just like any other element, right.

And so now let's go here to our CSS.

Yeah, you're close to the features.

Oh, and actually I already had the selector here,

so that's helpful.

And so now let's start by defining the color.

And for that, we use the stroke property,

and then our color, and that's it, give it a save and that,

didn't change a thing.

So let's see what's wrong, so features icon,

maybe I wrote that wrong.

Oh yeah, here I have feature,

but I want it to be called features icon.

And now, now it is green.

Nice. But of course, it's way too big.

Now here actually in the description of these icons,

it tells us right away that this is designed to be rendered

at 24 by 24 pixels, right?

So as I mentioned, by the end of the last lecture,

some icons are designed to be used in a small setting and

these icons are one of those.

So let's start by using 24 by 24, and we simply do that,

just like any other element.

So width, 24 pixels and height,

also 24 pixels, all right,

now this looks actually really, really small.

And so maybe we can push that a little bit

to like 32 pixels.

And so I think that this still looks nice.

It doesn't look like the example I showed you

in the last lecture.

Now, if we were to use something like 50 pixels,

then we would see that effect where the line suddenly

becomes way too thick.

Right. So now it does no longer look good here.

So we definitely need to make it smaller, but 32,

I think still looks fine.

We also need to use some common sense and compare it for

example here with the width of these characters.

And so, yep.

That looks acceptable to me.

Let's just also add some margin bottom here.

Let's say 16 pixels.

So that's okay for now,

but we will talk about visual hierarchy a little bit later,

and then we will adjust all the margins.

So all the spacing all over the page.

Now we could also have used that technique where we would

enclose this icon into some kind of circle with a green

background color.

But since this is a very simple design,

I think that that would actually add a little bit too much

visual clutter to this design.

So let's not do that.

And instead do it in our next big project.

All right.

But anyway,

let's now find an icon for this one

and for this one here as well.

And well, as I mentioned also by the end of last lecture,

this is not always very easy.

So an icon pack like this with only

230 icons is of course,

a little bit limited and cannot have icons for every single

situation that we want.

So I've searched in this icon pack here a lot

and I will not spend a ton of time now discussing the

different options.

I will just use here for comfort,

an icon that is called Happy.

So this one, all right, so this one,

I think still kind of conveys the message of comfort.

And so let's just use that.

So let's go here to our next one.

Right here.

And then the class should be

features well, not cion or whatever that was.

Yeah.

Nice. And now this one here, ethical and sustainable.

So that's like use a heart,

which is something that many pages

use for this kind of messaging.

And over time with experience, you will, of course,

then start to get a feeling of what icon is right

for what situation.

So just like everything else,

this is really also a matter of experience.

So this should be our heart.

And so features icon and beautiful.

That looks really nice.

So these icons here,

they make a lot of difference if you ask me,

it's a really nice touch.

And so now once the user reaches this section here,

it just makes the whole content a little bit easier to

digest and just easier to look at too, great.

So here we created three feature blocks using icons,

and now let's use

one of the other big applications of icons,

which is to simply provide visual assistance to text.

So here we have these, as we call them, cards.

So basically a component which has an image and a

description and then some like bullet points, as we can say.

So short descriptions of features of products,

and then down here also a button and a price.

So this is a typical cart in like a shop.

And it's also very common to add an icon to each of these

text descriptions right here.

So one describing like leisure,

one describing for how long it is comfortable then saying

that they use vegan and organic materials.

And finally, also the weight.

So let's try to use an icon for each of these to make this

content a little bit easier to digest

and easier to scan as well.

So again,

I have already searched through the icons and for the first

one, there was not really a really good fit, but again,

I really wanted to use this icon pack because it's so easy

to use, and therefore that was my main focus.

Even though if the icons were not perfect.

So here, I'm going to use this icon called Sparkles.

So let's go down here, here it is already, right?

And so here, each of these lines here is inside of a list.

So this unordered list,

and then each of them is a list element,

but I used CSS to remove the bullet points from this list.

That's why we cannot see them there.

So inside of each list item,

let's now paste the icon and there it is already.

And so this is also the reason why we then have this

span element here.

So that basically all the content is inside of an element.

So we have the icon inside of an SVG.

And then besides that we have the text inside a span

element, which remember is a generic inline element,

a little bit like divs for block level elements.

All right.

So let's also add a class to these ones

and I'm calling these ones a chair icon.

Okay.

So that's the features icon and down here, yeah.

I already have to selector for the chair icon.

So let's start again with the color.

And so for that,

remember we used the stroke property

and set it to this color.

Now, if you were to use these solid icons here,

then instead of using the stroke property,

you would actually need the fill property.

All right.

So those are two different options

when you want to style the color of an SVG icon.

And actually we can still try that in this icon here.

So let's just see what happens if we define the fill,

let's just put it to red.

And then the icon is suddenly filled with our red color.

All right. But now let's change the size here.

And these ones, let's actually make them 24 pixels.

So basically the size for which they were designed.

And that looks quite nice.

Okay.

And so our styles are now done.

All we need to do is to find the icons

and display them there.

So here in this one here, we are telling the customer

for how long the chair is comfortable.

So that sounds like we want to display a clock there, right?

So the clock will then quickly tell the user that

it is something related to time.

Then we just need to add a class, chair-icon.

All right,

next up we have like this vegan and organic materials,

which basically means that we want to care

about the environment, right?

So for that, we can use this earth icon.

Yeah. So actually this one called globe.

So let's copy that, call it the chair-icon.

Nice.

That's beautiful, and finally here,

we want the weight of a box.

So let's use something which looks like a box.

So box, but this one here, well,

somehow it doesn't look really appealing.

It really looks more like an archive,

which is the name here also of the icon.

So let's try cube and that one looks a lot better.

So copy SVG.

But of course I noticed because

I already designed this beforehand.

So if you were designing this yourself,

you would probably have to go through this whole list of

icons and decide between all of them, what fits best,

according to your message.

But since that takes a lot of time,

I already did that here beforehand of course.

So chair-icon, and there you go.

So this looks a lot better here than this one, right?

So again, we added some nice little touch here,

both visually,

and also to actually make it easier to scan the content

all by using four simple icons.

So that's really cool.

And so now all we need to do is to copy these to this card

and to this one here as well.

So let me now actually show you a very nice trick that we

can use in VS Code, which is to use multiple cursors.

And I'm going to start by doing that

in a very small example.

So let's say I wanted to select two different words.

So let's say this one, block quote, and now on my keyboard,

I can hit the Alt key or Option on a Mac and I can select

another word, let's say like this.

And so right now you see that we have

two blinking cursors here, right?

And now I can copy this.

So I just copied,

and let's say I wanted to paste these two somewhere.

So maybe actually just here or actually that doesn't make a

lot of sense.

So, well, let's say just here and maybe here.

And so to add now another cursor, I can again,

hit the Option key or the Alt key.

So just like this.

And so now again, I have two cursors.

And so if I now paste what I selected earlier,

then these two words appear exactly where we had these two

cursors and I can actually now do things with these two

cursors at the same time.

So I can add a space here and I can move around to text and

do everything in multiple places.

So that's going to be very helpful to copy these icons here,

not one by one, but all at once.

So let's select all of them.

So the first one is this and all the way

until the end of the SVG.

So that's the first one.

And now again,

I will hit the Alt or Option key before I click here again

and select all of this.

So you see that now we have this one selected and this one,

and now let's do it again.

And don't forget to hit the Alt or Option key before

clicking here.

Otherwise you will lose your other selections.

Okay, so three and again,

so one, two, three, four selections, and now copy it.

And now down here,

we just need to go to the places

where we want the icons to be.

So that's here and now again,

out and here and here and here, right?

And so now paste and save and there it is.

So very simple way of copying everything at the same

time, which saves us a lot of time.

And so now we can just do it again right here.

So here and here and here and here, paste it, save it.

And there you go.

Now, if you didn't manage to do it like this, of course,

you can also copy them one by one individually,

but this is a trick that I use all the time

when I'm using VS Code.

Okay.

And so that's how you use icons in your designs

following the rules that I described earlier.

So we used a nice icon pack with SVG icons.

We used them in two different situations to create feature

blocks and to provide visual assistance to text down here.

We didn't make the icons too big.

And also we try to choose icons that actually make sense,

which in most of the cases I think we actually achieved.

Awesome, so with that,

you mastered yet another very important ingredient

of great web design.

And so now let's move on together to the next one,

which is shadows.

So I'll see you there very soon.