"Image Replacement" with Font Awesome (Sass)

I've recently found myself using Font Awesome as a nice enhancement to replace using things like asterisks, bullets, etc. The following method is a bit hack-y but works well across all browsers. This is somewhat like using an "image replacement" technique only with fonts instead.

In this particular example, I'm using FA 4.0's Sass code to replace an asterisk that has a <span class="required">.

// background of parent container is blue
.required {
  color: blue;
  &:before {
    @extend .fa;
    @extend .fa-asterisk;
    color: darkblue;
  }
}

// .ie conditional class for old versions
.ie .required {
  color: #222;
  &:before {
    content: '';
  }
}

The important part is to set the .required color attribute to the same as it's parent's background so it won't appear visually. Then for old IE, you reset the color of that attribute and ditch the FA version. It's a nice way to bring a slightly nicer look to stuff you're marking as required.

This is what the technique looks like in a modern browser (Chrome in this case)

And this is what the fallback looks like (IE8 in this case)