Skip to main content

How to Create Social Media Icons with Pure CSS

How to Create Social Media Icons with Pure CSS

April 25, 2013 at 11:16PM

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.

Original article: How to Create Social Media Icons with Pure CSS

©2013 QuickOnlineTips (QOT). All Rights Reserved.



from Quick Online Tips http://www.quickonlinetips.com/archives/2013/04/pure-css-social-media-icons/

Comments

Popular posts from this blog

Ten Apps you Must Download when you Buy A New Android Smartphone

Ten Apps you Must Download when you Buy A New Android Smartphone

May 14, 2013 at 11:21PM You have spent loads of time researching which is the best Android smartphone that fits your budget, spoken to people in the know about gadgets and have saved accordingly. After contemplating a fair bit if this is the right time to pick a device and there is no other device you would rather have, you take a plunge into the astonishing world of Android and pick that shiny new Android device. Right now it is sitting proudly in your hands as you admire every curve, every pixel, visible or not of your new Android smartphone.It is the time to load your Android smartphone, to make it truly yours, a device that would be with you through your thick and thin. Time to install those applications which will complete your world, if not complete, at least make your world a lot more organized and a lot more fun. So which apps do you start off with?Like the famous Nokia commercial goes, you have our back. Here …

How to Password Protect & Encrypt Files [Mac/Windows]

How to Password Protect & Encrypt Files [Mac/Windows]

May 16, 2013 at 06:33PM Nowadays, the computer has a very important place in everybody’s life, as a personal gadget used for a lot of different things. Everything is digital and it is stored on a computer’s hard-disk or on a cloud system, offering you easier access to your favorite data.Computers have become the place where you hold pictures, documents, favorite music and everything else in the same place. While storing may include regular data, random and even useless information, people may also keep important stuff, such as wedding photos, work documents, projects and others.Have you ever thought about protecting critical data with a password? Taking into consideration that all information could be vulnerable to hackers or to unauthorized persons, this is a rather obvious procedure. Another reason to encrypt data can appear in case somebody else also uses that computer and you don’t want them to have access to private pict…

Who Needs To Pirate Software With A Free Software List Like This!

Who Needs To Pirate Software With A Free Software List Like This!

May 03, 2013 at 05:30AM I found this interesting list at this random forum on Internet and I found it worth sharing. It is indeed a huge list of free available software that you can use instead of buying or pirating the expensive ones. The list goes as following:3D Graphics:3Delight Free – http://www.3delight.com/index.htm
Anim8or – http://www.anim8or.com/
Aqsis – http://www.aqsis.com/
Blender – http://www.blender3d.org/
Houdini (Free Edition) – http://www.sidefx.com/apprentice/index.html
Now3D – http://digilander.libero.it/giulios/Eng/homepage.htm
OpenFX – http://www.openfx.org
POV-Ray – http://www.povray.org/
SOFTIMAGE|XSI EXP – http://www.softimage.com/products/exp/v3/
Terragen – http://www.planetside.co.uk/terragen/
Toxic – http://www.toxicengine.org/
Wings 3D – http://www.wings3d.com/Anti-Virus:a-squared – http://www.emsisoft.com/en/software/free/
AntiVir – http://www.free-av.com/
Avast – http://www.…