How to Create Social Media Icons with Pure CSS

By Posted 2013 Updated   BloggingSocial MediaTutorials

You can create fast loading social icons with pure CSS and no images at all like the ones you see in our sidebar. We have replaced the social icons with letters and styled them with CSS, so that they appear similar, but load instantly.

It removes multiple http server requests and replaces them with clean CSS which loads instantly, unlike images which take time to load. It also reduces the CDN bandwidth costs which we used for those images. Thought you can try CSS sprites, this is even faster. This CSS styling is made easier by the fact that people recognize colors and letters which help them identify social media icons like those of Facebook, Twitter, Google+, and Linkedin.

css social icons

CSS Social Media Icons

Here is the buttons HTML code to add to your sidebar widget or anywhere you want to place the code. It contains a single container #socialiconbox to style all the icons as well as act as a box which can be styled. Each icon is represented by letters and styled by CSS. Each has a common class .socialicons which can be styled to apply style to all icons as whole and each icon has an individual class to to style each icon separately also, for example to apply different colors and padding.

<div id="socialiconsbox">
<a class="facebook socialicons" href="https://www.facebook.com/abc" title="Facebook " target="_blank">f</a>
<a class="twitter socialicons" href="https://twitter.com/abc" title="Twitter " target="_blank">t</a>
<a class="googleplus socialicons" href="https://plus.google.com/abc" title="Google+" target="_blank">g+</a>
<a class="linkedin socialicons" href="https://linkedin.com/abc" title="Linkedin" target="_blank">in</a>
</div>

CSS Styling Social Media Icons

Now you need to add the id and classes to the style.css file or any other primary css file. We have added multiple parameters so you can style your icons perfectly depending on your site design.

#socialiconsbox {
margin: 10px 0;
}
.socialicons {
color: #FFF;
font-size: 1.5em;
margin-right: 6px;
font-family: georgia, serif;
letter-spacing: -1px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.facebook { background:#3B5998; padding:2px 10px; }
.twitter { background:#00ACED; padding:2px 10px; }
.googleplus { background:#D2412E; padding:2px 3px; }
.linkedin { background:#4A9CC9; padding: 2px 6px; }

social icons cssCustom CSS styles – The idea here is to use the #socialiconsbox as your container, so you can style the whole box with the icons as you like, like adding a border, or styling link colors etc. We have applied a margin here on top and bottom.  The .socialicons is the primary class applied to the text –  we have kept Georgia since it is a safe font and Googleplus icon especially looks good with this. The letter spacing is reduced to allow ‘g+’ and ‘in’ text to come close together. The padding is variable due to the different number of letters in the icons. The text is finished off with browser compatible mild curved borders for a nice button look – increase the border to make more circular buttons. You can increase the font size to get bigger icons.

Show off your CSS icons – Do try this out and see how fast your buttons load. Do experiment with the CSS to create amazing icons (and post in the comments) and we shall be happy to showcase your icons in a subsequent post. It would be great if you credit the original source code was here.

Update: Fixed small typo in classes. Thanks Viki for pointing that out.

Update: Use Awesome Font to create amazing social icons without images.


18 comments on “How to Create Social Media Icons with Pure CSS

  1. Madhav Tripathi says:

    Thanks!
    Soon I will replace my image sprite for social profiles because pure CSS and HTML is always better than images.

  2. Raspberry Ketone says:

    It might be a good idea, however the text in itself, does not look very attractive. I think a simple, minimalist icons would not occupy much size, therefore could serguir using them as such.

    Very good contribution.

    • P. Chandra says:

      The font can be changed to whatever font you feels looks best. We have Georgia for simplicity, looks good on Google+ icon and is web safe font.

  3. Paul D. Mitchell @ business web design company says:

    Choosing the right social media icons for your site is important. This is the way you draw attention to your different accounts. Sure people may find you on the different sites, but it’s a lot easier if you help them out by including these icons somewhere on your site.

    Regards
    Paul D. Mitchell

  4. Rohan Mod says:

    Nice gadget and tips everyone should focus on css as it is easy to load faster then the java script.i truly admire the use of css.

  5. Sai Krishna says:

    Hey man, this is really very nice, to increase up the loading speed these will actually help a lot.

    Although, readers might miss the old icons as they are more interactive but then webmasters have no choice, but to provide them with the best experience.

    I will surely try this out and let you know

    Thanks for the share..!!

    • P. Chandra says:

      This replaces the social media icons, and not the interactive icons which require javascript also.

  6. Clair says:

    Hi p.Chandra! Thanks for the coding for the social media icons using pure CSS. I must try it. I really love it because of its customization options.

  7. anna says:

    Thank you chandra!for shire the coding ,i really help me for me site customization options ,

  8. Virgil M. Burns says:

    There may be other variants in the font family as well, such as fonts with old-style numerals, small-caps numerals, condensed or expanded letters, etc. CSS 2.1 has no properties that select those.

  9. Harvey Fisher says:

    It is easy to turn off certain links, headers, or even menu items by simply setting their style to ‘hidden’. This can help you to roll out Confluence to users that may not be very Wiki-savvy yet. The simpler the UI, the easier it may be for them to use. However, please remember that removing the link to a part of the application does not mean that the functionality is not available. Every user can still change their style from within their browsers, or access the URL directly. Don’t rely on CSS to disable parts of Confluence.

  10. Madeleine A. Sargent says:

    With CSS, lists can be styled further, and images can be used as the list item marker.

  11. Milford S. Logan says:

    The normal one would just be styled using the style sheet attributes described above when using the normal <h1>heading 1</h1> tag.

  12. sankalp says:

    i think you are a web developer or a designer…for easy way to do the css and html go through the adobe dream weaver..thanks for your valueble coding for CSS

  13. Anil says:

    Thanks for Sharing this post,Social media icons is very important for any website in now a days,i will change in my website Social medial icons with css. Thanks :)

  14. Ci Module says:

    Awesome, now i dont need a plugin anymore. So my website will load faster, great article :)

  15. sarwar says:

    Thank you very much buddy. It saved my time,i really help me for me site customization options ,

Leave a Reply

Your email address will not be published. Required fields are marked *




css.php