Getting FontAwesome to respect CSS color -- are there FontAwesome quirks?

Question

I'm having trouble getting a span (or i) that I'm having represent a particular icon using FontAwesome styles to be the color I want it to be.

The weird thing is that the Chrome inspector shows it to "be" the color the CSS says it should be, and it shows that the rule is correctly implemented, but in the browser it appears as the color of the surrounding div, which, again, Chrome inspector shows to be correctly overridden.

Fontawesome works fine, using CSS styling to set color, in other parts of my app.

Has anyone run into any quirks with fontawesome and CSS styles? Under what circumstances would Chrome inspector show the font as one color but it would display as another?

If you can help, would appreciate. If not, that's fine, but don't down-vote me, if you would.

Answer 1

Assuming I understand your problem, you don't have any text in the <span> . But even if you add some, you're hiding the parent element by calling:

#la-tarifa-es{
        display: none
}

So all of the children will be hidden as well regardless of how you target them.

Answer 2

The answer was that FontAwesome works by adding a ::before to the SPAN (or I). So, apparently, the CSS rule for the containing DIV was operating on that, not the CSS rule for the SPAN. When I made a very specific rule for SPAN::BEFORE it worked.