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!
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 i.e. 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