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
- gplus
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
1 2 3 4 5 6 |
<ul class="social-squares"> <li class="red"><a class="icon-gplus " href="#googleplus"></a></li> <li class="purple"><a class="icon-linkedin " href="#linkedin"></a></li> <li class="blue"><a class="icon-facebook " href="#facebook"></a></li> <li class="green"><a class="icon-twitter " href="#twitter"></a></li> </ul> |
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” ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
ul.social-squares li,ul.social-squares li a { -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; -ms-transition: all .8s ease-in-out; } ul.social-squares { background: #180052; width:250px; height:250px; list-style: none; padding:2px; } ul.social-squares li{ float: left; height:121px; width:121px; box-sizing: border-box; margin:2px; /* 250 - (121*2) / 2 */ } ul.social-squares li a{ font-size: 95px; text-decoration: none !important; line-height: 125px; display: block; color:white; } ul.social-squares li:hover { background: #481bc4; } ul.social-squares li:hover a { color: #cbb9fb; } .red { background:#ba1d47; } .purple { background:#9d00a5; } .blue { background:#2d87ef; } .green { background:#00a000; } |
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
Fontello CSS Social Tiles
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.
Leave a Reply