Social media icons in HTML and CSS

Question

I have a design below having some social media icons (LinkedIn, Facebook, Google Plus, Twitter) which I am trying to replicate in HTML and CSS.

At this moment, I am able to get this in fiddle in font-awesome but it's not the same design.

I am wondering, is there any way in font-awesome we can replicate the above design? If it is not possible in font-awesome, then can we replicate the above design through some other library?

The HTML code in fiddle which I am using for every social media icon is:

<li class="navbar-icons">
  <a href="" target="_blank">
    <i class="fa fa-linkedin-square fa-6" aria-hidden="true"></i>
  </a>
</li>

Answer 1

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>

Answer 2

Since you're using Font Awesome the result is gonna have a different design, because that solution has the purpose of providing icons and not the kind of buttons you really want.

If you'd like to maintain the style of the each social media platform, you should go through the respective docs.

Twitter

As stated in the Twitter docs, you should start by adding the following snippet

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet">
Tweet</a>

and, then add Twitter for Websites JavaScript, which handles the styling of the button, and change the URL in the href attribute to be the one you need.

Google+

The most simple button provided by their docs is the following

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:plus action="share" href="https://www.example.com"></g:plus>

where the href attribute contains the URL to be shared.

Facebook and LinkedIn

Both (Facebook and LinkedIn) have very easy to use generators that will produce the code snippet you need to add to your HTML.