2016-10-17 10 views
0

の変化に消えアイコンは、境界のある正方形として表示されます。それは他のフォントとうまく動作しますが、なんらかの理由でこれはうまくいきません。フォント-素晴らしいアイコン、私は私のWebページに<em>フォント素晴らしい</em>アイコンを組み込むしようとしている、と私は選択の私のフォントに変更するまで、それはすべて、正常に動作し、<em>エキソ2</em>、およびフォント

私はfont-awesomeスタイルシートとgoogleフォントスタイルシートを含めました。

私が間違っていることを誰かが指摘することができたら、感謝します!

+0

予想通り、それはあなたが何か間違ったことをしようとしなければならない作品第二の例ではuが私たちのコード – Rahul

+0

を表示することができ、私は私がアイデアを持っているかもしれないと思います「exo 2」というフォントを呼び出す代わりに「fontawesome」と呼ぶべきでしょうか? –

+0

はい、下記の私の答えを参照してください – Rahul

答えて

1

この問題をuとDISPLYますfont-awesomeは、他のフォントをアイコンに設定している可能性があります。あなたが期待どおりにレンダリングされません、その後、すなわち<i>要素の子要素にフォントを設定するフォント素晴らしい場合は、この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>

を参照してください。

は私だけ別の親へのフォントではなく、アイコンを設定し、

+0

おかげさまですが、私はこれを使用するとフォントのテキストをどのように変更しますか:

+0

''の目的は、font-awesomeを使用すると、他のコンテンツではなくアイコンを表示することです。上記の例で示したように、他のコンテンツを 'divs'、' span'、またはあなたのニーズに合う要素に配置することができます – Chris

1

fontawesomeは、フォントのアイコンであるとエキソ2は、uは

font-family: FontAwesome; 

を適用しなければならないフォントではなく「フォントアイコン」

がfontawesomeを仕事にあり、uはここで何か他のものに変更した場合、私はエクソ2」だと思います「

font-family: Exo 2; 

それ文句を言わない仕事との正方形

関連する問題