Font-awesome Icon auf Änderung der Schrift verschwindet

Question

Ich versuche font-awesome Symbole in meiner Webseite zu integrieren, und es funktioniert gut, bis ich meine Schrift der Wahl zu ändern, Exo 2 und die Symbole erscheinen als umrandetes Quadrat. Es funktioniert gut mit anderen Schriftarten, aber aus irgendeinem Grund wird dies nicht funktionieren.

Ich habe die font-awesome Stylesheet und die google Schriftarten Stylesheet enthalten.

Wenn jemand mich darauf hinweisen könnte, was ich falsch mache, würde geschätzt werden!

Answer 1

Dieses Problem mit font-awesome könnte daran liegen, dass eine andere Schriftart auf das Icon gesetzt wird. Sehen Sie bitte diesen 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>

Wenn Sie die Schrift auf das untergeordnete Element das heißt das <i> Element gesetzt ist, dann font-awesome wird nicht gerendert werden, wie Sie es erwarten.

Im zweiten Beispiel, das ich nur andere Schriftart auf den übergeordneten gesetzt, aber nicht auf das Symbol, und es funktioniert wie erwartet

Answer 2

fontawesome ist Schriftsymbole und Exo 2 Schriftart und nicht "font-Icons"

fontawesome zu arbeiten u

font-family: FontAwesome; 

gelten muss und wenn u es auf etwas anderes ändern Ich denke, „Exo 2 "

font-family: Exo 2; 

es wird nicht funktionieren und wird disply u Quadrat