How to invert, inverse, hover the icons in zurb foundation?

Question

How does one invert, reverse, negate (what should one call it?) the icons in Zurb Foundation?

This gives me a foreground on background color icon.

<i class="fi-marker"></i>

But I want a background on foreground icon. I was expecting that it would just be a name change, or add a class?

The playground page doesn't seem to have any trouble presenting it on hover so I'm assuming it is a trivial matter:

Answer 1

It looks like they just have just setup a few styles on several of the elements. Here are some styles I extracted from the playground page.

.f-dropdown li:hover, .f-dropdown li:focus {
    background: #eeeeee
}

.f-dropdown.content:hover li {
    background:transparent;
}

.f-dropdown.content:hover {
    background:#000;
}

.f-dropdown.content:hover i {
    color: #FFF;
}

Hope this helps!