FontAwesome in span :

Question

span : after에 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 아이콘이 스팬에 표시되어야합니다. "Hello" 단어를 FontAwesome 아이콘으로 바꾸고 싶습니다. 크롬에서 예상대로 작동하지만 은이 아닙니다.

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을 사용하여 안녕하세요 콘텐츠를 표시하므로 fontawesome에 i 태그를 사용할 수 있습니다.

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