FontAwesomeを<i>以外の要素に使用する方法

Question

アイコンをCSSのみで変更しようとしていますが、表示するには封筒が必要です。私はFontAwesomeを使いたい。私は自分のstyle.cssファイルにそれをインポートした：

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); 

それが唯一の正方形を示し、私はこれを試してみたが、それはうまくいきませんでした：

.element:before { 
    content: "\f0e0"; 
    font-family: FontAwesome; 
} 

興味深いことに、I場合jsfidleで同じことを試してください、それは動作します。私が使っているDivi Themeの他のスタイルのいくつかはそれをブロックしているに違いありません。 どうすればいいですか？

これは私がmy pageに使用しています正確なコードです：あなたが別の要素にFontAwesomeのアイコンを使用したい場合は

a[title=flikr]:before { 
    font-family: FontAwesome !important; 
    content: "\f0e0" !important; 

} 

Answer 1

は、あなたがHTML要素と上のクラスとデータ要素を含めることを確認する必要があり

<div class="fa fa-envelope" aria-hidden="true"></div> 

あなたのアイコンを生成している部分がクラスfa-envelopeで、クラスfaは、それがFontAwesomeフォントファミリを使用することを決定します。ここで

はカップル異なるHTML要素上のアイコンを利用例です：JSFiddle

---

だから我々が見つけたとして、デフォルトのフォントの上書きを持って、ここで私はそれを処理する方法をされています

/* Target all of your :before tags in this schema (ul li a :before) */ 
.et_pb_social_media_follow .et_pb_social_icon a:before{ 
    font-family: FontAwesome !important; 
} 

/* call your icons content style separately */ 
.et-social-flikr a.icon:before { 
    content: "\e0a6" !important; 
} 

これは、あなたのコンテンツのスタイルはにアイコンを追加する必要があり、あなたのNAVでそれらの正方形のすべてを対象とFontAwesomeにそのフォントを設定する必要があります。