Jonas: So let's now learn how to use icons
in our design using HTML and CSS.
So as we just learned the first thing that 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 at 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 these 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're 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 do 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 while SVG is actually just code
so it's actually a similar specification to HTML
but basically to describe designs.
So I'm not gonna go into what SVG actually is.
We just want 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 most common use case for icons
is to create feature blocks.
So where we have an icon like here at 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 side, 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 three cols, which is all of this here.
And then we have three divs
and each of them is now a feature.
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 icon 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.
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.
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.
And so now let's go here to our CSS.
Let's add that, yeah, here 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 this stroke property.
And then, or color, now that's it,
gave 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 wanted to be called features icon.
And 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 now.
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 with 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 it were to use something like 50 pixels
then we would see that effect
where the line suddenly becomes way too thick.
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 yeah, 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.
But anyway, let's not 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 now, 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.
And 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 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, carts.
So basically a component which has an image
and the description
and then some like bullet points as we could 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 this icons
and for the first one, there's 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.
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 spin 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.
Alright, so let's also add a class to these ones.
And I'm calling these ones chair icon.
Okay, so that's the features icon.
And down here, yeah,
I already have the selector 40 chair icon.
So let's start again with the color.
And so for that, remember we use 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.
So with our red color.
But now let's change the size here.
And this ones, let's actually make them 24 pixels.
So basically the size for which they were designed.
And that looks quite nice.
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.
All right, so the clock will then quickly tell the user
that it is something related to time.
Then we just need to add our 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.
So for that we can use this earth icon.
Yeah, so actually it 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 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 share icon.
And there you go.
So this looks a lot better here than this one.
All 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 gonna 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.
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 the 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 1, 2, 3, 4 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 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.
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 tried 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 see you there very soon.