FontAwesome範圍內：

Question

我使用FontAwesome在範圍：之後。它在Chrome中工作正常，但不能在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中按預期工作，但不在IE中。

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

您可以使用span或i標籤fontawesome。但在這裏您使用的是span來顯示內容你好所以你可以使用i標籤爲fontawesome。

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