title: IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refresh
body: <p>UPDATE: I've written a blog post about what I've learned about this issue.  I still don't fully understand it, but hopefully someone will read this and shed some light on my issue: <a href="http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8" rel="noreferrer">http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8</a></p>
  
  <p>I have a page where I'm using @font-face to import a custom font for icons.  The icons are created with a class:</p>
  
  <pre><code>.icon {font-family: 'icon-font';}
  .icon:before {content: 'A';}
  </code></pre>
  
  <p>And voila, I have whatever icon is used for "A".  Pretty standard stuff, works in all browsers, including IE8.  </p>
  
  <p>However, in IE8, I have a bizarre bug.  When the page loads, the font is not working.  Instead of icons, I have letters all over the place.  Once I hover OVER the page (body), half the letters become icons.  The rest become icons when I hover over them.  </p>
  
  <p>SO the font-face is embedding properly.  The font-family and content properties are both working, but something else is causing the icons to load only after hover.</p>
  
  <p>So there's some sort of bug with @font-face in IE8 when you try to use the font with :before{content: 'a'} but I have no idea what the bug is.</p>
  
  <p>I've searched for hours on here for a similar bug/IE8 issue/anything, but I've had no luck and I'm about to go crazy.  ANY suggestions?  </p>
  
  <p>Let me know if I can provide anymore info that might be helpful. </p>
  
  <p>EDIT: Updated the broken link to the blog post.</p>