Hello everyone and welcome back.
In today's video we learn how to add icons to button.
So for this we have multiple options.
We can use one awesome or Google's material items for image dogs to I.
Let's try an example to understand it better.
Let's say you've got these buttons.
So I've got three buttons here and there is silence.
Now let's try using font awesome.
So open a new tab and search for font awesome click on this first link click on this button.
Start for free and do e-mail idea here.
That's a free upgrade.
General dot com saying it could ask you to confirm your e-mail.
So do that.
So guys once you verify that you mean this is how it should look.
Just copy this.
Get good on basted here in your extremists.
Hey
then you can simply start searching for icons and say let's say you want to search for Facebook icon.
So search bird here
select one item.
Let's see this one just click on this button.
Start using this icon copied on let's say you want to add that I can hear it.
So just paste it next year.
Label.
Save it.
I'm coming back here.
And as you can see this but this font awesome.
I can hear.
Now let's see you want some space between Facebook and the logo.
So let's wrap our label in a span let's give it a glass because we often do this for other icons as
well.
So let's say a label saver.
Let's give it some status here.
Let's see.
Bottom left eight pixels
now as you can see we've got the Facebook logo with some space and that Facebook label similarly.
Let's try out for Google searching will here let's select this icon
just copy this code.
Click here on basted next year legal.
Also we need to give some status to Google so that lets us operate in a span
and use the glass that we just commuted.
So plus label.
So as you can see we've got the Google I here.
It takes a lot of time some.
Sometimes it takes a little time to do it.
Similarly I try out for get help
let's say you want to use this one
copy the good listed here a spun element because we want to add some more states to this label.
That's a plus label that same.
Coming back here.
Now as you can see we've got this logo as well.
So we've got label for Facebook Google and get home.
So as you can see these logos that are white right now.
So you wanted to change the color.
So if you change the color of the button let's say
dodgy so even the color these icons change somewhat earlier let's say you wanted something light so
you like Google so the color of your icons also change so whatever you specified for your button or
whatever element is wrapping your eye good.
That could only be used for I can similarly let's try using an image.
So let's just search for Google I can you Google icon in G
images
so complete image address so instead of font awesome let's start using that image Donohue so it requires
a source of tribute so lots of space or you are here an old text.
Let's say Google icon let's save it coming but you as you can see we've got a really big Google icon
so let's start.
Let's give this an idea.
So you've Google logo.
Let's add some sites so harsh Google logo.
Let's give it over then hired say 20 pixels in height 20 exceeds let's say that.
So cue another as you can see we've got our icon inside the button.
All right.
That's all for today guys.
If there's something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video by anti-gay.