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?#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>

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. {
  text-align: center; } 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 --- */ li:hover {
      background: #33cc99;
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); } li a {
      display: block;
      width: 100%;
      height: 200%;
      position: relative;
      top: 0;
      color: #33cc99;
      transition: top 0.7s; }
       /* --- hover effect : shift up --- */ li:hover a {
        top: -60px; } 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.

I'm a front-end developer, recently mostly occupied with developing WordPress themes an plugins. I also particularly like writing tutorials (maybe because I was a prof in my previous life...). Otherwise coding, cooking and doing yoga.
Polish, married to a french guy Joe Vains with whom we live in the very center of Paris.
Follow @PeHaa on twitter and on dribbble.


Comments (9)

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

    1. 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.

  2. 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!

  3. Hello,
    Looks really nice!
    But I have the same problem, icons are not displayed. Could you check it on my site pelase?
    In footer, ul class=”social” is temporary set to display none.
    Thn you!

    1. Hi,

      Thank you!
      Could it be the wrong path to the fonts folder? Given your stylesheet the fonts folder should be inside catalog/view/theme/yooresponsive/stylesheet/
      Please check if you link the fonts properly.


Leave a reply

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