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 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; }
Custom 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.