How to Style Your Social Media Buttons Using Font Awesome

| Last Updated: | In: Bootstrap, HTML / CSS


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.

How To Create Social Media Buttons

Try it Yourself

How to Style Your Social Media Buttons

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.

Below is the list of social media icons, which you can add to your website.

Also you need to add below CSS code to style your social media icons.

Output is:How To Create Social Media Buttons-square

Round Social media Buttons

If you want to add round social media buttons, then add the border-radius:50% in your css code. See the below example:

The output of above CSS code:

Round Social media Buttons

Tags: , , , ,


About: Prem Tiwari

Prem Tiwari is the founder of freewebmentor.com and is a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby.


You may also like:

Get Free Access of 500+ Scripts

Don't worry you'll not be spammed!

Featured eBook

WordPress Security Guide

Free Guide: Learn how to implement security guideline in your WordPress site...

DOWNLOAD

Free WordPress Setup Service

Free WordPress Setup

Want to Setup WordPress Blog Setup? I will help you in the setup of your WordPress blog.

Click Here

Pincode Finder

pincode-finder tool

Online Pincode Finder

Best tool to locate post Office address and pincodes of all india...

SEARCH NOW