Nowadays every website must have the social media icons like Facebook, Twitter, Instagram, Google plus and much more. I this tutorial, you will learn how to style your social media buttons with the help of font awesome CSS. Please keep your close eye in this tutorial, I am going to share How to Style Your Social Media Buttons Using Font Awesome with examples.
Let’s create social media buttons for your site. Before creating any social buttons, make sure you have added the font awesome CSS file in your web page. Include the below font awesome CSS file before head tag close in your web page.
1 2 3 | <!-- Add icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/ font-awesome.min.css"/> |
Below is the list of social media icons, which you can add to your website.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!-- Add font awesome icons --> <a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a> <a href="#" class="fa fa-google"></a> <a href="#" class="fa fa-linkedin"></a> <a href="#" class="fa fa-youtube"></a> <a href="#" class="fa fa-instagram"></a> <a href="#" class="fa fa-pinterest"></a> <a href="#" class="fa fa-snapchat-ghost"></a> <a href="#" class="fa fa-skype"></a> <a href="#" class="fa fa-android"></a> <a href="#" class="fa fa-dribbble"></a> <a href="#" class="fa fa-vimeo"></a> <a href="#" class="fa fa-tumblr"></a> <a href="#" class="fa fa-vine"></a> <a href="#" class="fa fa-foursquare"></a> <a href="#" class="fa fa-stumbleupon"></a> <a href="#" class="fa fa-flickr"></a> <a href="#" class="fa fa-yahoo"></a> <a href="#" class="fa fa-reddit"></a> <a href="#" class="fa fa-rss"></a> |
Also you need to add below CSS code to style your social media icons.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | .fa { padding: 20px; font-size: 30px; width: 50px; text-align: center; text-decoration: none; margin: 5px 2px; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #3B5998; color: white; } .fa-twitter { background: #55ACEE; color: white; } .fa-google { background: #dd4b39; color: white; } .fa-linkedin { background: #007bb5; color: white; } .fa-youtube { background: #bb0000; color: white; } .fa-instagram { background: #125688; color: white; } .fa-pinterest { background: #cb2027; color: white; } .fa-snapchat-ghost { background: #fffc00; color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } .fa-skype { background: #00aff0; color: white; } .fa-android { background: #a4c639; color: white; } .fa-dribbble { background: #ea4c89; color: white; } .fa-vimeo { background: #45bbff; color: white; } .fa-tumblr { background: #2c4762; color: white; } .fa-vine { background: #00b489; color: white; } .fa-foursquare { background: #45bbff; color: white; } .fa-stumbleupon { background: #eb4924; color: white; } .fa-flickr { background: #f40083; color: white; } .fa-yahoo { background: #430297; color: white; } .fa-soundcloud { background: #ff5500; color: white; } .fa-reddit { background: #ff5700; color: white; } .fa-rss { background: #ff6600; color: white; } |
Output is:
If you want to add round social media buttons, then add the border-radius:50% in your css code. See the below example:
1 2 3 4 5 6 7 8 9 | .fa { padding: 20px; font-size: 30px; width: 30px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 50%; } |
The output of above CSS code:
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: bootstrap examples, bootstrap social media icons, font awesome icons, font awesome social media button, font awesome social media icons
