Font-Awesome Icon not resizing

Question

I have 3 font-awesome icons side-by-side in a dev tag. On mobile there were a bit too small. I put this in my code but this specific icon doesn't change size?

<i class="fa fa-heart fa-2x"></i>

And here's how they look:

CSS:

hover-info .fa .fa-heart {
    font-size: 2em;
}

Answer 1

This is working in my browser:

.fa-heart {
  font-size: 4em;
}

Maybe your reference to 'hover-info' is causing the issue.

NOTE: your 'css' file has to be loaded after fontawesome.