How to add social icons in website using Font Awesome

So lets start, first create a normal html page in VS code or you can create in any differnet Platform.

Screenshot (346).png

this is how you create normal html page format.

now create a section in body tag and in there you create unordered list where you can add your social icons as i shown below

section.png

after this go to, bootstrapcdn.com/fontawesome in this website you will find CDN for Font Awesome. Actually there are total 4 CDN's for Font Awesome for different platforms like PUG,HTML,CSS,HAML. from this you need to select CDN for HTML page. Copy that link which written under HTML.

Screenshot (283).png

Screenshot (285).png

after copying that like go to your html page. and in html page you will see one Head tag now paste that in Head tag as i shown below

spath.png

so now you have to go to fontawesome.com/v4.7.0/icons this website where you can find different social icons as you can see

Screenshot (348).png

Screenshot (349).png

Now select any icon and by clicking on it you will see an interface something like this

Screenshot (351).png

Now copy that tag which is given there. you can add multiple icons in your list tag which you have created in section tag as i shown below

Screenshot (353).png

To increase icon sizes relative to their container you can use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes. now you will see something like this when you run your html page

Screenshot (354).png

Now you have to give some styling to it you can create seperate css file for styling part and then import it to html by using link or you can simply create style tag in Head tag and you can write all code reagrding to styling part over there. Once styling you will get a stylish icon which make your website look more attractive.

Screenshot (355).png

So finally we are done here, it was nice to have interaction like this. Bbye for now ill see you in next Blog ๐Ÿ˜‰

Have a nice Day !

Everything you can imagine is REAL โœจ

ย