Pure CSS3 Animated Social Tiles using Fontello social fonts

Hi Guys,

First of all I would like to tell you how good Fontello really is. Yeah its awesome. The best thing I like about it is that you download/use what you really want and custom CSS class names is just an icing on the cake. I will show you in a second how I used Fontello and CSS3 to create social icon tiles.

Fontello can be browsed through this link http://fontello.com/

I downloaded the following Fonts/CSS

1. gplus
2. linkedin
3. facebook
4. twitter

You should be able to search and find by putting in the above text in the search field.

The End result to what we are going to produce is shown below (Please note that this is a screenshot, Live demo is provided a little bit below)

The Markup

Here is the markup that will be required to achieve above result

Please note that anchor class names, this is where Fontello will kick in.

That’s pretty basic stuff for HTML gurus like yourself but the CSS stuff is even simpler and can be further simplified. Lets check it out

The CSS

[geshi lang=”css” nums=”1″ target=”_blank” ]

Nothing much really as you can see we are just making use of CSS transitions to give us that hover effect that we want.

Now its time for a Demo, I have hosted the demo at codepen.io as well as here on this site, so If you want to play with the code please do so at codepen

Demo

http://jaspreetchahal.org/examples/html5/fontello/fonthover.html

Playground

You can play around with code edits and have fun with my pen hosted on codepen

Download Source

[wpdm_file id=43]

I hope that this will help you out in some way. Please don’t hesitate to correct/improve the above code if you think it can be further simplified. I don’t spend much time doing that myself.

Cheers.