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.

Answer 2

Another option if you don´t want to define a css class, is this way:

<font size="8"> <i class="fa fa-facebook"></i> </font>

Then it only remains to change the number of the font tag.
In my case this worked very well, I hope that in yours too.
Regards