FreePX.net

Get interactive: 27 free social hover icons

Posted in Design, Webdesign and tagged , , , . Posted on April 28, 2010 by admin

move your mouse over the icons to see the effect

You need some nice social icons, but you don’t have much space in your layout and want your page to be interactive? Then stop searching now, you just came to the right place.

These icons use not much space, yet are visually pleasing and easily recognizable. A hover effect which highlights the icons when the mouse is moved over them increases interactivity and improves User Experience (UX). They are based on these icons and use only CSS for the hover effects, so they are very accessible.


Download icons

It is quite easy to embed the icons into your website or blog:

  1. Download the file, extract it and upload the files to the root folder of your webspace. You can place them in a different folder as well, but make sure to change the paths to the files accordingly.
  2. Integregrate the CSS file in your html or template—insert this code above the </head> tag:

    <link rel="stylesheet" type="text/css" href="social.css"/>
  3. Place the icons you want on your site:
    <a href="LINK" title="TITLE"><div id="si-TYPE" class="social"> </div></a>
    Replace LINK with the link to your social platform, TITLE with the text you want to be shown when the mouse is moved over the icon, and TYPE with the name of the platform (as used in the demo above).

You can also have a look at the demo file included in the package.

These icons are included, in alphabetical order:

blogger • brightkite • delicious • designfloat • digg • dopplr • facebook • flickr • friendfeed • gamespot • gmail • lastfm • linkedin • mixx • myspace • newsvine • posterous • reddit • sphinn • stumbleupon • technorati • tripadvisor • tumblr • twittr • vimeo • wordpress • youtube

2 Responses

  1. Pingback: » 27 free social mini icons collection download • FreePX.net—free textures, photographs, tutorials and more

  2. Suresh says:

    Thanks for your service

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

FreePX.net • free textures, photographs, tutorials and more Proudly powered by WordPress