Grow your CSS skills. Land your dream job.

5 Use Cases for Icon Fonts

Published by Guest Author

The following is a guest post by Tim Pietrusky. Tim knows this site has long been a proponent of using fonts for icons, and had his own interesting use cases to share. While creating the demos, to make things easier for himself, he created a free service for icon font hosting. It makes for a nice gift to the community as well. I'll let him tell you about it...

Icon fonts are great:

  • You can CSS the crap out of them and they don’t mind
  • They look good on any display or resolution
  • There is only one HTTP request for any size set of icons

Let's look at 5 typical uses cases for icon fonts.

Before we start

We won't be using any vendor prefixes to keep the example code clean and readable. We will be using things like animations, transitions, and transforms, all of which require vendor prefixes to ensure the best browser support. How you want to deal with vendor prefixes is up to you.

As you will see in the examples, I use the icon fonts hosting service weloveiconfonts.com. This is my own project. Here’s the story: I wanted to write an article about icon fonts and searched for a free icon fonts hosting service, but found none. So I created this service to be able to write this article.

1. CSS Loader

There are quite a few awesome, pure CSS loaders out there and you can even create your own at cssload.net. Another way of doing this is with icon fonts. You can use a character that looks like a loading symbol and animate it with CSS.

This is the basic HTML. The first three loaders are children of div.wrapper and and single elements. The forth (div.complex) is a combination of two icons.

<div class="wrapper">
  <span class="fontelico-spin1"></span>
  <span class="fontelico-spin3"></span>
  <span class="fontelico-spin5"></span>
</div>

<div class="complex">
  <span class="fontelico-emo-devil"></span>
  <span class="fontelico-spin4"></span>
</div>

Import the icon font Fontelico into your CSS:

@import url(http://weloveiconfonts.com/api/?family=fontelico);
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}

Add the animation named load to the elements, whichs spins them around (from 0deg to 360deg), scales up and down a little bit, and changes the color.

/* Normal (left) */
span {
  float: left;
  text-align: center;
  margin: 0 5em;
  animation: load 1.337s infinite ease-out reverse;
}
/* Fast (center) */
.wrapper span:nth-child(2) {
  animation: load .5s infinite linear;
}
/* Steps (right) */
.wrapper span:nth-child(3) {
  animation: load 1.25s infinite steps(18, end) forwards;
}
@keyframes load {
  0% {
    transform: rotate(0) scale(1, 1);
    color: rgba(0, 0, 0, .5);
  }
  10% { color: rgba(0, 120, 0, .5); }
  20% { color: rgba(0, 120, 120, .5); }
  30% { color: rgba(120, 120, 0, .5); }
  40% { color: rgba(0, 0, 120, .5); }
  50% {
    transform: rotate(180deg) scale(1.85, 1.85);
    color: rgba(120, 0, 0, .5);
  }
  100% {
    transform: rotate(360deg) scale(1, 1);
    color: rgba(0, 0, 0, .5);
  }
}

The last loader (div.complex) combines two icons and stacks them on top of each other. The first child is the devil element (using the animation named rotate) and the second child is the spin icon (using the animation named scale).

.complex span:nth-child(1),
.complex span:nth-child(2) {
  position: absolute;
  margin: 0;  
  width: 1em;
  height: 1em;
}
/* Devil icon  */
.complex span:nth-child(1) {
  animation: load 1.25s infinite steps(18, end) forwards;
}
/* Spin icon */
.complex span:nth-child(2) {
  font-size: 3em;
  left: -.35em;
  top: -.35em;
  color: rgba(0, 0, 0, .3);
  animation: devil 3s infinite linear reverse forwards;
}
@keyframes devil {
  0% {
    transform: scale(-1.85, 1.85);
  }
  50% {
    transform: scale(1.85, -1.85);
  }
  100% {
    transform: scale(-1.85, 1.85);
  }
}

Demo on CodePen:

2. SocialCount meets Style

People love using social sharing buttons on their sites to make it easier for visitors to spread the word. But when you combine Facebook, Twitter and Google+ you are facing an 309KB empty cache load size. That’s where the SocialCount jQuery plugin comes in. SocialCount is progressively enhanced, lazy loaded, and mobile friendly.

The default styling is simple and the iframe that contains the buttons is tiny. Let's enhance these buttons with some fancy CSS.

This is the HTML that was created with the SocialCount markup generator. Just an unordered list with with links and icons.

<ul
  class="socialcount"
  data-url="http://www.google.com/"
  data-counts="true"
  data-share-text="Google is a search engine">
 
  <li class="facebook">
    <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.google.com/" title="Share on Facebook">
      <span class="count entypo-thumbs-up"></span>
    </a>
  </li>

  <li class="twitter">
    <a href="https://twitter.com/intent/tweet?text=http://www.google.com/" title="Share on Twitter">
      <span class="count entypo-twitter"></span>
    </a>
  </li>

  <li class="googleplus">
    <a href="https://plus.google.com/share?url=http://www.google.com/" title="Share on Google Plus">
        <span class="count entypo-gplus"></span>
    </a>
  </li>

</ul>

Import the icon font Entypo into your CSS:

@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
  font: 2.5em/1.9em 'entypo', sans-serif;
}

We'll override the default styling provided by SocialCount by:

  • Adding a transition
  • Scaling the iframe
  • Setting a custom background on the buttons
Editor's note: The CSS below is in SCSS format of Sass. A number of the following demos use this. If you want to see the regular CSS, you can visit the CodePen demo links provided and click the word "SCSS" in the header of the CSS editor to see the compiled CSS.
.socialcount {
  > li {
    width: 33%;
    border-radius: 0;
    transition: all .3s ease-in-out;
    cursor: pointer;
   
    &:hover [class*="entypo-"]:before {
      opacity: 0;  
    }
  }
 
  iframe {
    transform: scale(1.65, 1.65);    
  }
 
  .button {
    top: 50%;
    margin: -.75em 0 0 0;
    height: 2em;
  }
 
  .facebook {
    background: rgba(59, 89, 152, .7);
  }
   
  &.like .facebook iframe {
    width: 8em;
  }
 
  .twitter {
    background: rgba(0, 172, 237, .7);  
  }
 
  .googleplus {
    background: rgba(172, 0, 0, .7);  
  }
}

Demo on CodePen:

3. Enhanced lists

The following three examples are all based on this simle HTML.

<div>
  <h2>Title</h2>
  <ul class="style">
    <li data-text="">Text</li>
    <li data-text="">Text</li>
    <li data-text="">Text</li>
  </ul>
</div>

Import the icon font Font Awesome into your CSS:

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

Add the default styling for list, list elements, pseudo elements, and the button. Instead of using a class to set the icon on the list elements, we change the content property of the element, creating a pseudo element.

ul {
  list-style: none;
  padding: 0;
   
  li {
    position: relative;
    min-height: 2em;
    padding: .3em .3em .3em 1.5em;
    transition:
      background .3s ease-in-out,
      color .3s ease-in-out,
      box-shadow .1s ease-in-out,
      height .25s ease-in-out
   ;
   
    button {
      position: absolute;
      left: 1.45em;
      bottom: .35em;
      opacity: 0;
      height: 0;
      border: none;
      font-size: .8em;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
   
    &:before {
      position: absolute;
      top: .425em;
      font-family: 'FontAwesome', sans-serif;
      margin: 0 .35em 0 -1.35em;
      vertical-align: bottom;
    }
    &:hover {
      button {
        opacity: 1;
        height: 2em;
      }
     
      &:before {
        color: rgba(255, 255, 255, 1);
        right: 0;
        transform: scale(2.5, 2.5) translate(-.25em, .15em);
      }
      &:after {
        position: absolute;
        content: attr(data-text);
      }
    }
  }
}

3.1 Stuff You Love

The first examle is very easy. A heart instead of the default list-style and a special hover: The icon is moved to the right and the ::after pseudo-element gets the text of the data-attribute data-text.

.love {
  li {  
    &:before {
      /* fontawesome-heart */
      content: "\f004";
    }
    &:before,
    &:after {
      color: rgba(220, 20, 20, .6);
    }
    &:hover {
      background: rgba(220, 20, 20, .6);
   
      &:after {
        width: 2em;
        right: .445em;
      }
    }
  }
}

3.2 Downloads

This is a custom list of downloads with extended markup: A link and a button for every list element. The button is hidden by default and shown on hover.

.downloads {
  li {
    border-bottom: .15em solid rgba(0, 0, 0, .3);
   
    &:before {
      /* fontawesome-download-alt */
      content: "\f019";
      color: rgba(50, 50, 50, .5);
    }
    &:hover {
      background: rgba(0, 140, 0, .7);
      height: 4em;
   
      &:after {
        right: .35em;
      }
     
      &:before {
        color: rgba(255, 255, 255, .2);
      }
    }
  }
}

3.3 Your account

A UI concept for a user menu. When you hover over a list element, the icon is moved to the right and the box-shadow fills the whole background. Every list element has its own icon based on the :nth-child selector and the content property.

.account {
  padding: .75em;
  border: .15em solid rgba(0, 0, 0, .2);
  background-color: rgba(0, 0, 0, .7);
  background-image: radial-gradient(center, ellipse cover, rgba(104,104,104,0.6) 0%,rgba(23,23,23,0.7) 100%);
  box-shadow: inset 0 0 .35em 0 rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .6);
  backface-visibility: hidden;
   
  li {  
    cursor: pointer;
       
    &:nth-child(1):before {
      /* fontawesome-heart-empty */
      content: "\f08a";
    }
    &:nth-child(2):before {
      /* fontawesome-glass */
      content: "\f000";
    }
    &:nth-child(3) {
      margin-bottom: 1em;
     
      &:before {
      /* fontawesome-comment */
        content: "\f075";
      }
    }
    &:nth-child(4) {
      margin-bottom: .5em;
     
      &:before {
      /* fontawesome-cog */
         content: "\f013";
      }
    }
    &:nth-child(5):before {
      /* fontawesome-signout */
      content: "\f08b";
    }
    &:hover {
      color: rgba(255, 255, 255, 1);
      padding-left: 1.5em;
      box-shadow: inset 0 0 0 10em rgba(255, 255, 255, .5);
   
      &:before {
        color: rgba(255, 255, 255, 1);
        transform: none;
      }  
    }
  }
}

Demo of all three list types on CodePen:

4. Emocons.js jQuery Plugin

Emojons.js is a jQuery plugin which searches the content of an element for specific character sequences. All matches are replaced with a span and the HTML class of the corresponding icon. For example, a chat app:

<div class="chat">
    :D :) ;) :'( :o :/ :( B) :P :|
    :beer: :devil: :shoot: :coffee: :thumbsup: :angry: :ueber-happy:
</div>

Then call the Emocons.js plugin method on your element:

$('.chat').emocons();

All elements inside chat are now transformed into something like this

<span class="fontelico-emo-grin go" title=":D"></span>

Import the icon font Fontelico into your CSS:

@import url(http://weloveiconfonts.com/api/?family=fontelico);
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}

When Emocons.js transforms a string into an emoticon, it adds the class go (which calls an animation) to the span element.

.go {
  animation: hey .55s 1 linear;
}
@keyframes hey {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.85, -1.85);
  }
  100% {
    transform: scale(1, 1);
  }
}

Some of the emoticons get a special style (e.g. a color change) or add something via an ::after pseudo element.

.fontelico-emo-devil {
  color:rgba(180, 0, 0, .9);
}
.fontelico-emo-beer:after {
  box-shadow:
    -.475em .75em 0 .275em rgba(220, 220, 0, 1),
    -.185em .675em 0 .175em rgba(220, 220, 0, 1)
  ;    
}
.fontelico-emo-coffee:after {
  box-shadow:
    -.475em .78em 0 .235em rgba(222, 184, 135, 1),
    -.215em .715em 0 .155em rgba(222, 184, 135, 1)
  ;    
}
.fontelico-emo-shoot:after {
  border-radius: .15em;
  box-shadow: .315em .525em 0 .1em rgba(0, 0, 0, 1);    
}
.fontelico-emo-angry:after {
  border-radius: .15em;
  box-shadow: -.695em .455em 0 .085em rgba(0, 220, 0, .6);
  z-index: 2;
}

Demo on CodePen:

5. Parallax Movie #1337

The last example is just for fun. It’s just an experiment to create an endless parallax movie with one icon font. The he HTML consists of many elements to create the scene:

  • The setting: sky, ground, night and sun
  • Fixed element: bicycle
  • Animated elements: Trees, giraffe, shopping cart, buildings and heliport
<div class="night"></div>
<div class="wrapper">
  <div class="sun">
    <div class="maki-fast-food"></div>
  </div>
 
  <div class="sky"></div>
  <span class="maki-bicycle"></span>
   
  <span class="maki-tree-1" data-child="1"></span>
  <span class="maki-tree-1" data-child="2"></span>
  <span class="maki-tree-1" data-child="3"></span>
   
  <span class="maki-giraffe"></span>
  <span class="maki-grocery-store"></span>
   
  <span class="maki-commerical-building" data-child="1"></span>
  <span class="maki-commerical-building" data-child="2"></span>
   
  <span class="maki-heliport"></span>
   
  <div class="ground"></div>
</div>

Import the icon font Maki into your CSS:

@import url(http://weloveiconfonts.com/api/?family=maki);
[class*="maki-"] {
  position: absolute;
  margin: 0;  
  color: #fff;
  font-size: 2em;
}
[class*="maki-"]:before{
  font-family: 'maki', sans-serif;
}
*:after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  z-index: -1;
  width: 0;
  height: 0;
}

The wrapper rotates the whole scene -3deg.

.wrapper {
  height: 140%;
  width: 120%;
  transform: rotate(-3deg) translate(-10%, -15%);    
}

When the sun goes down, the night rises.

.night {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  animation: night 45s infinite forwards;
}
@keyframes night {
  0%, 30%, 100% {background:rgba(0, 0, 0, 0);}  
  55% {background: rgba(0, 0, 0, .6);}
}

The sky and the ground both use the same background-position animation, but at different speeds.

.sky {
  position: relative;
  z-index: 0;
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png);
  height: 50%;    
  width: 100%;
  animation: rollin-bg 25s linear infinite forwards;
}
.ground {
  position: absolute;
  z-index: 1;
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
  height: 50%;    
  width: 100%;
  animation: rollin-bg 7s linear infinite forwards;
}
@keyframes rollin-bg {
  0% { background-position: 100%; }  
  100% { background-position: 0; }
}

Moving an element along a circle is an awesome article from Lea Verou which is used here to animate the burger-sun.

.sun {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 10%;
  width: 2em;
  height: 2em;
  font-size: 4em;
  line-height: 1;
  animation: circle 45s linear infinite;
  transform-origin: 50% 3.85em;
}
.sun [class*="maki-"] {
  color: rgba(240, 180, 0, .2);
  text-shadow: 0 0 .35em rgba(240, 240, 0, .7);
}
.sun > div {
  animation: inner-circle 45s linear infinite;
}
@keyframes circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes inner-circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

This is the only element which has no animation. But it should look like it’s moving.

.maki-bicycle {
  left: 50%;
  z-index: 4;
  margin: -.85em 0 0 -.5em;
  color: rgba(30, 30, 140, .95);
}

And here are the animated elements which use all the same rolling animation at different speed.

.maki-tree-1[data-child="1"] {
  margin: -1em 0 0 5%;
  z-index: 5;
  animation: rollin 5s linear infinite;
  font-size: 2.4em;
  color: rgba(0, 110, 0, .8);
}
.maki-tree-1[data-child="2"] {
  margin: -1em 0 0 85%;  
  z-index: 2;
  animation: rollin 12s linear infinite;
  font-size: 1.6em;
  color: rgba(0, 110, 0, .5);
}
.maki-tree-1[data-child="3"] {
  margin: -1em 0 0 25%;  
  z-index: 2;
  animation: rollin 17s linear infinite;
  font-size: 1.2em;
  color: rgba(0, 110, 0, .3);
}
.maki-giraffe {
  margin: .25em 0 0 5%;  
  z-index: 6;
  animation: rollin 12s linear infinite reverse;
  font-size: 10em;
  color: rgba(255, 255, 10, .9);
}
.maki-giraffe:after {
  right: -3em;
  content: '\e82a \e82a \e82a \e82a \e82a';
  font: .2em 'Maki', sans-serif;
  letter-spacing: .2em;
  width: 3em;
  color: rgba(0, 0, 0, .6);
  box-shadow:
    0 .45em 0 .75em rgba(255, 255, 255, .4),
    1em .35em 0 .75em rgba(255, 255, 255, .4),
    2.25em .25em 0 1.05em rgba(255, 255, 255, .4)  
  ;
  border-radius: 50%;
  transform: translate(2.3em, .55em) rotateY(-180deg);
}
.maki-grocery-store {
  margin: -.35em 0 0 5%;
  z-index: 5;
  animation: rollin 22s linear infinite;
  font-size: 4em;
  color: rgba(220, 0, 10, .7);
}
.maki-commerical-building[data-child="1"] {
  margin: -1em 0 0 5%;
  z-index: 3;
  animation: rollin 6s linear infinite;
  font-size: 7em;
  color: rgba(120, 0, 120, .8);
}
.maki-commerical-building[data-child="2"] {
  margin: -1em 0 0 5%;
  z-index: 2;
  animation: rollin 14s linear infinite;
  font-size: 4em;
  color: rgba(0, 120, 120, .4);
}
.maki-heliport {
  margin: -3.5em 0 0 2em;  
  z-index: 1;
  color: rgba(30, 30, 30, .45);
  font-size: 1.25em;
  animation: rollin 26s linear infinite reverse 2s;
}
@keyframes rollin {
  0% {margin-left:105%}  
  100% {margin-left:-15%;}
}

Demo on CodePen:

Further reading

Thanks for your time! And of course this isn't all you can do with icon fonts. Don't be afraid to experiment yourself.

Comments

  1. cnwtx
    Permalink to comment#

    Wow. The movie is great! But, I can’t see any real-world application for that one…

    • Like it says in the article “The last example is just for fun” :D I only can think of some kind of visual arts festival and this movie as projection on the wall :D

  2. Awesome Tim!

    I also really like the possibilities of unicode–range in combination with icon fonts set in the PUA.

    I believe this method will be a huge advantage w/future uses of inline icons without requiring generated content trickery and additional surrounding markup by authors.

    Cheers Homie!

  3. How do you handle IE9+, Windows and ClearType rendering? Font rendering is very different on IE9+ and all my icon fonts look misaligned in ClearType browsers. Is anyone having this issue too?

    • There are a couple tricks you can use…
      -webkit-font-smoothing: antialiased or a slight text-shadow on your icons (i.e. .the-icon { text-shadow: 0 1px 1px rgba(255,255,25,0.50)}) These suggestions are hacks in my opinion in order to compensate for a poorly made icon (see Ben Dunkle @EmpireOfLight AKA WordPress’ Icon Maker)

      There could also be a situation where the icon being rendered is actually a terribly made icon that was never designed to render on a pixel grid properly.

    • Permalink to comment#

      @Dennis Gaebel i tried all your tricks, it still renders horrible in windows (when they are small)

    • @Eliazer
      Well…-webkit-font-smoothing is definitely not gonna work on IE, text-shadow will only work for IE10+, but most likely the problem with the icon not displaying properly at small sizes is because it was never designed on a pixel grid for the small size you’re after.

  4. Hirvesh
    Permalink to comment#

    Awesome uses cases for Icon Fonts! The movie on is specially nice! Icon fonts are a win, that’s why I compiled (shameless selfplug):

    The Most Comprehensive Index Of Free Iconic Web Fonts

    Icon fonts FTW! :)

  5. Permalink to comment#

    Good stuff! I used a similar technique for creating a pixel-free media player. To make things slightly snappier I base64 encoded the fonts.

    You can read about it here : http://blog.appsfuel.com/2012/11/06/icon-fonts-and-how-to-create-a-pixelfree-audio-player/

  6. Tim Chase
    Permalink to comment#

    I personally dislike abusing fonts for this purpose. I fly with Firefox set to enforce my own fonts at all times since there are too many bozos on the net who try to subject me to their unreadably hideous font choices. However, this makes icon-fonts show up as the menu here where I see “k HOME 9 Forums Q Snippets p Galleries…” which is just confusing and ugly (especially since they don’t double as hot-keys to perform the actions).

    If you want scalable images, use SVG for goodness sake. They’re resolution independent like icon fonts, they allow multiple colors, and degrade more pleasantly. The only issue I’ve found involves support for spriting with SVGs where a single download gets all the icons but then gets cropped.

    • BAH HUMBUG RABBLE RABBLE.

      Seriously though. You’re a bit like the “tech gurus” that disable JavaScript just because in 1995 someone made something they didn’t like.

      Icon fonts are better than image based icons for a number of reasons, your download speed of the page being one of them.

      For example, say I have 20 icons, that’s potentially 20 HTTP requests for 20Kb files. If I combine those into a sprite, maybe it’s 300kb.

      A font is only potentially 30kb for the same set – so your load time is 10% what it would be in theory.

    • Tim Chase
      Permalink to comment#

      Andy,

      Yes, I am a bit of an old-school tech wonk, and I do tend to fly with JS turned off for a multitude of reasons, though enable it selectively using NoScript/NotScript/ScriptNo for sites that don’t abuse it (I can count my whitelisted sites on one hand) or by visiting with a virgin browser session. Most drive-by web exploits are mitigated by using a script blocker as repeatedly noted on security bulletins. It also makes my web experience a lot less annoying, as I get to use the web on my terms. The extra battery life due to lower CPU usage is just a side benefit. That said…

      You state that “icon fonts are better than image based icons”, but you don’t clarify whether you’re talking about raster images (gif/jpg/png) or vector images. I’ll grant you the benefits of icon fonts over raster image based icons as you mention the cost of 20 HTTP requests or 300k of image download.

      However, my main point was regarding vector images (SVG) vs icon fonts, where SVG offers
      - semantic benefits where it really is just an image, not an insertion of pseudo-content that relies on displaying in the right font
      - multiple colors
      - less visual breakage if your font/image server/CDN is down—you’re not left with random letters on the screen; it just does what browsers do when an image is unavailable (whether remove from the flow or display a placeholder broken-image icon)
      - comparable size (a gzipped .SVG is on par with an icon font, for comparable content)

      The only downsides to SVG come from support (older IE in particular), especially with regards to clipping when used as sprites.

      Shalom.

    • Merne
      Permalink to comment#

      Javascript disabling? What is this 1999? I think your distrust is unwarranted, but that’s just my opinion. If we all took this mindset, we’d still be doing layout with tables.

      There are many different ways to use icon fonts, some more semantic than others. As far as “the CDN” being down, you can package your font and embed it within your site. If your site is up, your font is up. Your argument for SVG is fair, but in the real world we support IE, so this is not a viable solution for most projects.

    • Tim Chase
      Permalink to comment#

      Merne,

      You’re welcome to consider my distrust unwarranted, but a scan of vulnerability lists often shows that many exploits fail if JS is disabled. And if you listen to any of the security authorities (I recommend the Security Now podcast), most will say that letting arbitrary code run on your machine is a risk. Yes, it may be a minimal risk. However, NoScript allows me to be selective in which sites I allow/trust to run code on my machine. Additionally, my browsing experience is a LOT faster as I don’t have 30 tabs worth of sites all trying to run their various scripts.

      I’m not sure how you jump from there to “still doing layout with tables.” CSS & JS are entirely independent.

      As for SVG, one can always use http://code.google.com/p/svgweb/ to provide the functionality in IE.

    • @Tim Chase I agree in 100% with you. I also prefer to disable Web fonts all together and use only locally available fonts. More and more web sites try to use fancy fonts which may look awesome on the screen used by the designer but often are blurry and completely unreadable on my monitor.

      Moreover, with all the talk about semantics (bashing tables for layout, etc.) it’s extremely hypocritical to advise using icon fonts for displaying icons.

    • it’s extremely hypocritical to advise using icon fonts for displaying icons.

      You brought this up on another article about icon fonts too.

      http://css-tricks.com/html-for-icon-font-usage/

      Read that article. Watch the video. It explains the accessibility and fallback issues. If you have issues with blurriness on your computer and you don’t like them, fine, but there isn’t an inherent bad-ness to using them if you do it right.

    • Tim Chase
      Permalink to comment#

      Chris,

      Since any glyph can be assigned to any character (assuming you are in control of the font-definition), in the case of your site, I’d lean towards using HTML accesskeys combined with the icon-fonts, so that if the icon-font is not loaded, the displayed non-font-iconified characters have some value. In the case of your site, rather than “k HOME 9 Forums Q Snippets p Galleries…” which Firefox shows me, you might map your accesskeys so that “H” goes to “Home” and the “H” glyph is your “Home” glyph. Same for “F”orums and “S”nippets, then have your Forum and Snippet glyphs map to “F” and “S” respectively. Then there’s at least some semantic value to the (formerly) arbitrary letters that show up when the font doesn’t load—whether because the user-agent overrides the CSS (like I tend to fly with, as mentioned above in my root comment), differing-domain font-serving prevents (Firefox intentionally blocks fonts from different domains as a security measure), or server/network issues interfere.

      There are certainly places where icon-fonts can be used without interfering, but it’s also easy to use them in ways that intrude on the experience.

      -Tim

    • Tim Chase
      Permalink to comment#

      Just noticed that, since my original reply posting from which I copied the “k HOME 9 Forums…” bit, it looks like the “k” now appears as a checkmark. My concerns still stand, regardless. :-)

  7. Permalink to comment#

    Wow! Very cool integration of icon fonts and css, and thanks for the icon-font hosting!

  8. Permalink to comment#

    wow! That’s cool.

  9. Subash
    Permalink to comment#

    I am surly gonna use those fonts but can you explain about your cdn or uptime because I don’t want to break my site.
    Btw, Windows 9 (666TB) ROFL.

  10. Permalink to comment#

    @Chris, We are still remaining with one major problem, When these icons get very small they render horribly on windows machines…

    I even checked your demo try to slide down the size in a PC..

    After all, is there any solution?

  11. Santosh
    Permalink to comment#

    Hi Chris, You are always great. :)

  12. I was introduced to Icomoon (which you list in the Further Reading section) earlier this year by a colleague and only in the last 2-3 months got the chance to use it. Wow – it is insanely awesome. Love how easy it is to use, that you can add in your own icons, and even save different sets.

    Great post, btw!

  13. Its amazing and very impressive. Thank you for sharing this nice way of animation. Please keep it up :)

  14. Thanks for these, especially the social count and enhanced lists examples. Can’t wait to use them on a project. I personally long for the day when I’ll never have to slice another image.

  15. great tutorial, very impressive!

  16. Great article!! Thanks :D

  17. Ron Gilmour
    Permalink to comment#

    Wow! This is a great article. I’ve been looking around for something like case #3 for some time. Thanks!

  18. Permalink to comment#

    Excellent roundup, Chris. Thank you.

  19. Permalink to comment#

    Really nice examples, the Enhanced lists it’s the most interesting for me, i have just a question, about the 3.3 Your account case. Which is the techinque use to show the “get file” on hover. In the html you have get this file. I do not get the meaning. Thanks in advance your explanation

    • The “button” (get this file) is hidden by default (height: 0; opacity: 0;). When you :hover a list element, the button is shown (height: 2em; opacity: 1;).

  20. KF
    Permalink to comment#

    Icon fonts are great! But there’s one thing I can’t quite figure out – vertical centering.

    Setting CSS to “vertical-align: middle;” doesn’t work as expected. There’s clearly some extra space (approx. 2-4px) above the icon and it’s driving me nuts! How can I get rid of it?

    Here’s an example of what I mean:

    http://jsfiddle.net/yQJ2z/

    Any advice would be greatly appreciated.

  21. Yep. This is nice technique, but results is not.

    Ah and this is not working on Samsung Wawe 2 (on Opera Mini and Delphin)

  22. Some awesome ideas there.
    I’ve started using icon fonts almost exclusively instead of bothering with crappy little png’s. Once you have the font set up it’s too easy to change icons around and try different things on the fly.
    These little samples have given me some ideas!

  23. Fertile Frog: Web Design Lancashire
    Permalink to comment#

    I’m using the Font Awesome pictographics in one of my After Effects videos for a client of mine. I love how the vector graphic display perfectly on my retina MacBook. Thanks for another great course!

  24. Munaf
    Permalink to comment#

    What is the better “font-awesome” icon or grouped icon image “css-sprite” ?
    “Myntra.com” use CSS-SPrite For ICON so my Question which one is preferable

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".