Grayscale in IE 10 and 11?

I am trying to figure out how to get grayscale to work in IE 10 and 11. I have a grid of icons that I want to grayscale. It's built something like this:

<ul class="medium-block-grid-4 large-block-grid-4">

    <li>
        <a href="#"><figure class="cap-bot report-10x10">
            <figcaption>Caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas lectus non odio bibendum iaculis. Proin a lorem purus.</figcaption>
        </figure></a>
    </li>

    <li>
        <a href="#"><figure class="cap-bot report-10kbonus locked">
            <figcaption><i class="fa fa-lock fa-5x fa-fw" style="margin-bottom: 1rem;"></i><br> Caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas lectus non odio bibendum iaculis. Proin a lorem purus.</figcaption>
        </figure></a>
    </li>

<ul>

The first figure is full color. The second figure contains the classes "locked grayscale" which makes the whole figure gray. It's working fine in Chrome, Safari, and Firefox. But it doesn't work in IE.

I've looked at various solutions and tried to implement some jQuery plugins (such as this one and this one), but it seems like of them are written specifically to grayscale images. Is there a way to grayscale items in IE that aren't images? My icons are contained in square blue divs with blue borders, and I'd like to force everything to be gray.

UPDATE: Here is a fiddle with the icons in question.

Try this css

a i.fa{color:#ccc;}

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>    
<li>
    <a href="#"><figure class="fig-1 cap-bot">
        <figcaption><i class="fa fa-lock fa-5x fa-fw" style="margin-bottom: 1rem;"></i><br>Caption goes here.</figcaption>
    </figure></a>
</li>
<li>
    <a href="#"><figure class="fig-2 cap-bot locked grayscale">
        <figcaption><i class="fa fa-lock fa-5x fa-fw" style="margin-bottom: 1rem;"></i><br>Caption goes here.</figcaption>
    </figure></a>
</li>
</ul>