Icon Fonts in Use with a Fancy Hover Effect

Social Font icons hover effect

In this tutorial we will play a bit with icon fonts. Besides other advantages, this technique provides an easy way to have your icons look crisp on retina displays.
We’ll use a custom set of social icons generated with IcoMoon App and we will add a fancy effect on hover.

Step 1 Quick Visit to IcoMoon App

For the purpose of this tutorial we select 6 social networks icons : dribbble, facebook, twitter, pinterest, tumblr, flickr, google plus and github. What follows is as easy as clicking “Font” and “Download”. Our custom font icons set is ready to use.

Icomoon - tiny custom set
The IcoMoon download folder contains a style.css file that will use as a base. Here’s what we’ll start with:

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype'),
		url('fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon-dribbble:before, .icon-twitter:before, .... {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-dribbble:before {
	content: "e00a";
}
.icon-twitter:before {
	content: "e00b";
}
....

Step 2 HTML

Let’s look at the markup

<ul class="social">
  <li><a href="#" aria-hidden="true" class="icon-dribbble"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-twitter"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-facebook"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-pinterest"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-flickr"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-google-plus"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-tumblr"></a></li>
  <li><a href="#" aria-hidden="true" class="icon-github"></a></li>
</ul>

The aria-hidden state indicates whether an element is visible or not, we use it to tell the screen reader that an element is not visible to assistive technology.

Step 3 Hover Effect – the idea

The idea is to create a kind of a movement effect on hover. We’ll have the “li” elements with overflow set to hidden, and the “a” elements being twice as high. With the a:after pseudo-elements we duplicate the icon. What happens on hover is : “li” changes its background color, the “a” element shifts up half its height (see the image below). Both changes with a subtle transition.
hover effect

Step 4 Additional Font Icons styles

What we have to do is to duplicate the icon-*:before styles for icon-*:after :

.icon-dribbble:before, .icon-twitter:before, ..., .icon-github:before,
.icon-dribbble:after, .icon-twitter:after, ..., .icon-github:after {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.icon-dribbble:before, .icon-dribbble:after {
  content: "e00a"; }

.icon-twitter:before, .icon-twitter:after {
  content: "e00b"; }
...

Step 5 CSS continued

Note that, for the simplicity, I don’t use the vendor prefixes for transition.

ul.social {
  text-align: center; }
  ul.social li {
    display: inline-block;
    width: 60px;
    height: 60px;
    overflow: hidden;
    line-height: 60px;
    background: #404040;
    /* --- optional, it looks nice also with simple squares --- */
    border-radius: 100%;
    transition-duration: 0.7s; }
    /* --- hover effect : background color change --- */ 
    ul.social li:hover {
      background: #33cc99;
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); }
    ul.social li a {
      display: block;
      width: 100%;
      height: 200%;
      position: relative;
      top: 0;
      color: #33cc99;
      transition: top 0.7s; }
       /* --- hover effect : shift up --- */ 
      ul.social li:hover a {
        top: -60px; }
      ul.social li a:after {
        position: absolute;
        width: inherit;
        height: 50%;
        left: 0;
        bottom: 0;
        color: #404040;
        line-height: 60px;
        text-align: center; }

And that’s all. I hope you’ve found this tutorial useful, looking forward to your comments. Thanks.

Terms of use :

You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.

About the author

I'm a web designer and a front-end developer. I particularly like writing tutorials (maybe because I was a prof in my previous life...). My other speciality is creating seamless patterns for Photoshop and Illustrator. I'm Polish, living with Joe Vains in the center of Paris. Follow @PeHaa on twitter and on dribbble.

Website

View all articles by PeHaa

7 Comments

  1. @PeHaa really thanks to share,

    In my application most of time i have used awesome fonts(http://fortawesome.github.com/Font-Awesome/) has a huge collection of icons and it can working in all browser.

  2. Laurie M.

    nicely done!!
    any idea how to include tooltips with this?

  3. Laurie M.

    comment above was with wrong email address…same person….bought you a cup of coffee :)
    would love any input regarding adding tooltips
    thanks
    L.

    • Hi, thank you :)
      Since “li” elements have overflow set to hidden we slightly change the markup to add tooltips, ie. we nest the “a” within a span “.icon” and add another span “.tooltip”.
      Consequently, the styles that apply to “li” have to be applied to “.icon”.
      Finally, we position the “.tooltip” absolutely and make it visible only on hover.
      Here is the modified version, and you can see the modified demo here.
      You might want to work some more on the tooltips style, I keep it very simple here.

  4. Never heard about the IcoMoon App before.

    It’s a nice resource, thanks !

  5. Very nice indeed! Thank you for sharing I’ll be using these as inspiration, cheers!

  6. lena

    Hey i love this! But i have a problem. I’m using Font Awesome. And somehow the hover doesn’t really work? I mean it’s hovering, but when i hove i don’t have any icon. It should work, since i only switched the font for now. Any idea why it doesn’t work?
    Would be nice to hear of you!

Leave a Comment