FontAwesome in span：

Question

私はに：でFontAwesomeを使用しています。それはクロムでは問題なく動作しますが、IEでは動作しません。上記のコードで

<label><span class="sptxt">Hello</span></label> 

.sptxt:after{ 
font-family: FontAwesome; 
content: "\ea28"; 
text-decoration: inherit; 
position: absolute; 
font-size: 80px; 
color: inherit; 
margin: 0px 0 0 4px; 
z-index: 1; 
visibility: visible; 
} 
.sptxt{visibility:hidden;} 

、私はスパンにテキスト"こんにちは"を隠したいです。 FontAwesomeアイコンをスパンに表示する必要があります。 「こんにちは」の単語をFontAwesomeのアイコンに置き換えます。 Chromeでは期待通りに動作しますが、ではなく、では動作しません。

Answer 1

私は、可視性の代わりにテキストインデントを使用します。

jsfiddle code

.element { 
    position: relative; 
    text-indent: -9999px; 
    display: block; 
} 

.element:after{ 
    content: "\f000"; 
    font-family: FontAwesome; 
    text-decoration: inherit; 
    position: absolute; 
    font-size: 30px; 
    color: inherit; 
    z-index: 1; 
    left: 9999px; 
} 

Answer 2

fontawesomeにはspanまたはiタグを使用できます。しかしここではspanを使用してコンテンツHelloを表示していますので、fontawesomeのiタグを使用できます。

<label><span class="sptxt"><i></i>Hello</span></label>