Social media icons in HTML and CSS -

i have design below having social media icons (linkedin, facebook, google plus, twitter) trying replicate in html , css.

at moment, able in fiddle in font-awesome it's not same design.

i wondering, there way in font-awesome can replicate above design? if not possible in font-awesome, can replicate above design through other library?

the html code in fiddle using 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>

since you're using font awesome result gonna have different design, because solution has purpose of providing icons , not kind of buttons want.

if you'd maintain style of each social media platform, should go through respective docs.

twitter

as stated in twitter docs, should start adding following snippet

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

and, add twitter websites javascript, handles styling of button, , change url in href attribute 1 need.

the simple button provided docs 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 href attribute contains url shared.

both (facebook , linkedin) have easy use generators produce code snippet need add html.