adding a glow to font icon using css text-shadow

I needed to add a hover glow effect to a font icon, we use flatui which uses fonticons (bootstrap v3 has switched to using font icons now)
I tried box-shadow on the font icon span, but there was some spacing above and below the span with the font icon. It did not look good.

        &:hover .icons-bar a > span {
            box-shadow: 0px 0px 5px 5px #fff;
       }

     <div class="icons-bar">
       <a ng-click="toggleOpen()">
        <span class="fui-mail">
        <span>
        </span>
        </span>
       </a>
   </div>


....sooo I pinged a colleague who had the bright idea of using text-shadow instead of box-shadow. That worked!

text-shadow takes 4 values:
- x co-ordinate
- y co-ordinate
- blur radius (optional, create a blue effect by pixel size...the is key)
- color of shadow

Using 1 text-shadow can add a nice glow effect to one corner, but I needed the effect in all 4 corners. You can list multiple text-shadows as part of the rule so I defined 4:

            &:hover .icons-bar a > span {
                text-shadow: -5px -4px 10px #fff,
                            -3px 4px 10px  #fff,
                            5px 4px 10px  #fff,
                            4px -4px 10px  #fff,
          }


text-shadow is not supported in IE9 but is supported in most everything else