Font awesome icon showing as square in chrome?

Question

I am trying to use a font-awsome icon within a button. The icon works fine in firefox but when I use it in chrome it appears as a square. I have looked around and the only thing

Answer 1

Very late answer but this might help another brother out there!

I found out that this behaviour was solved by NOT having display: block; on the i/.fa element.

.fa is standard inline-block but I changed it to block for better compatibility for old browsers, but it has to be inline-block or maybe something else similar.

Hope it helps someone out there!