title: Social media icons in HTML and CSS
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/016im.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/016im.png" alt="Social media buttons"></a></p>
  
  <p>At this moment, I am able to get this in <a href="https://jsfiddle.net/4efsastg/16/show/" rel="nofollow noreferrer">fiddle</a> in font-awesome but it's not the same design.</p>
  
  <p>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? </p>
  
  <p>The HTML code in fiddle which I am using for every social media icon is:</p>
  
  <pre><code>&lt;li class="navbar-icons"&gt;
    &lt;a href="" target="_blank"&gt;
      &lt;i class="fa fa-linkedin-square fa-6" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>