0

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.

Social media buttons

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>

2 Answers 2

1

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.

3
  • This is what I am able to make in Fiddle. I tried putting linkedin icon in fiddle from the code generator but for some reasons I was unable to put it there. Also, I am wondering how to increase the value of social media icons by 1, 2,3 and so on if anyone shares it on social media ?
    – user5447339
    Sep 12, 2017 at 18:23
  • I tried sharing the same fiddle on my facebook account but the value were not increasing in the social media icons in fiddle.
    – user5447339
    Sep 12, 2017 at 18:34
  • 1
    @user5447339 to try and keep this question self contained and not too broad I suggest you mark the answer if it helped you and then create another one asking about the share count specifically. I'd be happy to monitor your profile to check the new question.
    – oxfist
    Sep 12, 2017 at 20:51
-2
<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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.