• Monday , 25 May 2020

Bootstrap 3 Tutorial Pt.4 – Font Awesome & Social Icons

Code Canyon

Webpage: http://bootstrapbay.com
Source Files: http://github.com/bootstrapbay/tutorials

In this installment of our Bootstrap tutorial, we show you how to install Font Awesome and add social icons to your website’s footer.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

– Designed from scratch to be fully compatible with Bootstrap 3.0.0.

– Font Awesome is completely free for commercial use.

– In a single collection, Font Awesome is a pictographic language of web-related actions.

– Fewer compatibility concerns because Font Awesome doesn’t require JavaScript.

– Easily style icon color, size, shadow, and anything that’s possible with CSS.

– Scalable vector graphics means every icon looks awesome at any size.

– Font Awesome icons are vectors, which mean they’re gorgeous on high-resolution displays.

– Font Awesome won’t trip up screen readers, unlike other icon fonts.

Original source

3d Ocean

Related Posts


  1. LiamZedTheDesigner
    December 6, 2018 at 12:30

    So I did my stylesheet and placed it in the css folder wrote the line of code <link href="css/LiamCustom.css" rel="stylesheet"> and still nothing is changing when I preview. I tried closing the browser window and opening the index file again freshly saved from the folder and still nothing.

  2. Jayangshu Saha
    December 6, 2018 at 12:30

    Thanks a lot! Nice tutorial.

  3. Ramchandra Mishra
    December 6, 2018 at 12:30

    hello sir , will you please tell me how to show this icons in asp.net textbox .
    reply soon

  4. Chrisell Bencalo
    December 6, 2018 at 12:30

    How can I put the text on the middle?

  5. Akshay Ithape
    December 6, 2018 at 12:30

    thnx sir…..

  6. Dalton HolySchorst
    December 6, 2018 at 12:30

    2k Followers in your IG Account Rightaway http://storage.googleapis.com/3678154186211/0432204141546.html

  7. Lyhor Mom
    December 6, 2018 at 12:30

    I got the same problem. It's okay for twitter icon, but Facebook icon's got a problem. The link connect is okay but the icon doesn't appear. Instead, there is a square.

  8. Shortcut Romeo
    December 6, 2018 at 12:30

    after attach css file fb colour changed but when i put my click on it its blue again

  9. Richard Wei
    December 6, 2018 at 12:30

    Looks like the URL is no longer available and fontawesome wants you to download the package instead

  10. One Strike
    December 6, 2018 at 12:30

    how do i change the color of the link sin the top-right fixed navbar if i hover over the links (a elements) ???

  11. Luis Antonio
    December 6, 2018 at 12:30

    Learning so much in here, thanks 😀

  12. Saeed Artportal
    December 6, 2018 at 12:30

    Thanks, it is very helpful……and clearly….

  13. Mostafa TAGMOUTI
    December 6, 2018 at 12:30

    bonjour svp j'ai une question a propos bootstrap, quand j'ajoute du code php a des boutons creés par bootstrap ça me donne des erreurs au niveau des noms des classes, comment je peux faire ? et merci.

  14. Francis Allen Diancin
    December 6, 2018 at 12:30

    Thank you so much for this video. It helps me a lot. Keep posting.

  15. Renegade
    December 6, 2018 at 12:30

    Got a question.

    I put in three icons in the navbar however I would like one of them to have another colour.

    Now how do I reference just one of the icons in the whole class?

  16. Joris Blok
    December 6, 2018 at 12:30

    To add some space between the icons, add margin-right: 20px to the custom css file.

  17. dariusdareme
    December 6, 2018 at 12:30

    Good tutorials. The talks are too slow, I got sleepy.
    Luckily I've got speed 2x.

  18. EM KB
    December 6, 2018 at 12:30

    Great, thank you

  19. Linnea Westman
    December 6, 2018 at 12:30

    My custom.css file doesn't seem to work. The icons remain blue.

  20. N1ckN1ck100
    December 6, 2018 at 12:30

    I get duplicate icons randomly in the footer.

  21. Thalia Amargianou
    December 6, 2018 at 12:30

    nice job my frined…! i have a problem when i create the custom.css file…! doesn't work… the color of the icons remain blue…!

  22. Web Developer
    December 6, 2018 at 12:30

    This video is awesome! Thank you! 

  23. Gopher Go
    December 6, 2018 at 12:30

    Thank you, the only string I forgot to add was "http:" but now it's working. 

  24. Ankit Khand
    December 6, 2018 at 12:30

    enjoyed ur every tutorial. bt i ve one question regarding the footer tag. what should i do to get a bit of spaces between facebook icon to others ?

  25. Erika Thomas
    December 6, 2018 at 12:30

    These videos are awesome. THANK YOU so much for this!

  26. Ivan Vilches
    December 6, 2018 at 12:30

    thanks very much for this nice tutorial and your time doing this.

  27. Stuart Ryan
    December 6, 2018 at 12:30

    I just can't seem to get the fb icon to display. It seems to be there but missing since i can select it. Any idea? I have added the code to the head section and included http: but it just won't appear.

  28. BootstrapBay
    December 6, 2018 at 12:30

    Part 4 of our Bootstrap tutorial: How to add Font Awesome social icons to your footer.

Leave A Comment

You must be logged in to post a comment.