February 18, 2020 0

How to use Font Awesome in Bootstrap Responsive Grid Tutorial

How to use Font Awesome in Bootstrap Responsive Grid Tutorial


Let’s learn how to implement font awesome
into our bootstrap project.. [Music].. Hello and welcome to another new episode of
learning simplified. In this tutorial we are going to understand
how to install font awesome into our current bootstrap
project. In doing so the first thing that we have to
do is to download the font awesome icons off the website. So that is why we are going to Google and
here we will be typing font awesome and here we can see
that this is the official site of font awesome. Now in this context I would like to say that
font-awesome is a free and open source. Font awesome is fully open source and is GPL
friendly. You can use it for commercial projects, open
source projects, or really just about whatever you
want. In its homepage the first thing that we are
going to do we are going to download this is font awesome font and css Toolkit. So we will be pressing download,
and then there will be a Zip file which will be containing the font awesome CSS and fonts
Toolkit. On extracting it we will be getting font awesome,
cSS and fonts. So these two things are required in this case. If we get back here, we can see that inside
this CSS so far there is no installation of font awesome. So the first
thing that we are going to do we are practically getting back to font awesome and inside this
CSS folder we are going to copy these two files and we are going to
place It Inside our CSS folder. So here it is. I have pasted these two CSS files over here,
font awesome.CSS and font awesome.min.CSS. Now the next thing is get back
to font awesome folder that you have downloaded off the Internet and inside this fonts folder,
you will see that these are the fonts those are required. All we have
to do we have to copy these fonts, get back to your own project and here inside this fonts
folder into your project just click in and paste all those files inside
this fonts folder. Now the remaining thing is all you need to
do you need to get back to index.HTML of your project.. and paste it here. Now just change this file name to.. You are
practically using bootstrap.min.CSS. You see here? this is the bootstrap.min.CSS. So all you need to do, just copy this name; So you have connected your font-awesome.min.css
to your index.htm page and you have placed all those files those are required like those
CSS files and these font files over here. You have placed all those things into their
desert places. I am going to place now font awesome icons. That is why I am getting back here and I am
clicking into this icon[sub menu]. I’ll be requiring some icons; for say I am
using this icon – envelope. So this is the class that needed to be copied
all we are going to do we are going to copy it, and we
are going to paste it inside this banner2. You need to specify this.. Just press control+s, get back to your
project and reload and now you can see that a fa-envelope has been produced over here
which is also rotating in nature but there are a lot of things those needed to
be modified but first of all let’s complete our installation. This is the first thing that we have you used,
in the second place for say… Press control + s, get back to your project
and reload and now you can see that all those three icons those are present over here
and all of them are rotating. Now we have to modify we have to customize
all these three icons. We are getting back to
custom.CSS. The first thing the very first thing that
we are going to do we are practically turning off every kind of heights those were provided
previously. This is
the first case. As you may see here that it starts with the
fa-class. So all we need to do any fa-class that comes
under banner2 it will be having these following properties as if: Color. Now if we just press control + s and get back
to our project and reload, now we can see that we have successfully changed its color. No another thing, we are placing here.. Now we are ready to go. Press control + s, get back to your project
and reload and now you can see that this thing is
practically working which is directly into this Banner2. Now another thing, provide a particular padding. Reload and you can see now that this is practically
working perfectly. If you want to make it a little then just
go ahead. Make it 7em, this font-size, make it just
7em; press control + s, get back to your project and reload. Now you can see that this is working perfectly
well. Now in the same manner what we are going to
do we are going to make changes into these two icons too. So all we are going to do now we are going
to copy this any fa-class which is present within banner3,
it will be reflecting these changes. And again inside this banner 4 we are changing
this class name into banner4 .fa-class, now we are ready to go. Let’s Press control+s, get back to our project
and reload and now we can see that everything is back into its order. All we need to do we need to make the subsequent
changes inside these respective classes that is practically holding it. Now we can see that all those three icons
those are practically working perfectly well. Now the problem is those backgrounds, those
are needed to be taken care of. So that is why we are practically making these
things off, we are commenting it out; you may comment it out or you may delete it; now
we have practically stripped it off. Change the background color, which background
color should be changed? Banner1
containing holder that is present behind all those things. So we need to change the background color
of banner1. That is why we are getting back to eat and
here… Now here you can do two things. The first thing is you are placing this background
colour into the main containing holder that is this Banner1. Or if you just put
this background, that is background color of this Banner2, Banner3 and Banner4 those
are being executed and banner1 is been off. Now there’s some certain changes those could
be made. Border-top. Provide this color code. Press control + s, get back to your project,
reload now you can see that there’s that border-top but it is too much
loud. Instead of this color code, this hexadecimal
code you are placing… So this should be the color code that will
be used. The color code is little bit of faded now. If you want to make a little bit of more faded,
change these values now everything is right in order right on track. If you want to make some more changes.. And now you can see that you are generating
a text-shadow. Now let’s take care of this animation part…

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.