真棒字体图标在更改字体后消失

Question

I'm trying to incorporate font-awesome icons in my webpage, and it all works fine, until I change to my font of choice, Exo 2 , and the icons show up as a bordered square. It works fine with other fonts, but for some reason this won't work.

I have included the font-awesome stylesheet, and the google fonts stylesheet.

If anyone could point me to what I'm doing wrong, would be appreciated!

Answer 1

fontawesome is font icons and Exo 2 is font and not "font icons"

to work fontawesome u must apply

font-family: FontAwesome;

and if u change it to something else here i think "Exo 2"

font-family: Exo 2;

it wont work and will disply u square

Answer 2

This issue with font-awesome could be due to setting other font to the icon. Please see this fiddle

 .parent1, .parent1 > i{ font-family: 'Open Sans', sans-serif; } .parent2{ font-family: 'Open Sans', sans-serif; } 

 <script src="https://use.fontawesome.com/a30dc5ca39.js"></script> <div class="parent1"> <i class="fa fa-times"></i>This won't work </div> <div class="parent2"> <i class="fa fa-times"></i>This works </div> 

If you set the font to the child element ie the <i> element, then font-awesome won't be rendered as you expect.

In the second example I only set different font to the parent, but not the icon, and it works as expected