CODEWITHSUNDEEP
htmlcssfont-awesome
ranjith
ranjith

Reputation: 199

FontAwesome in span:after

I'm using FontAwesome in span:after. It working fine in chrome but not working in 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;}

In the above code, I want hide the text "Hello" in span. FontAwesome icon has to be displayed in span. I want to replace "Hello" word with FontAwesome icon. It works as expected in Chrome but not in IE.

Upvotes: 0

Views: 148

Answers (2)

Gergő Tar
Gergő Tar

Reputation: 56

I would do with text-indent instead of visibility.

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;
 }

Upvotes: 1

Niroj S
Niroj S

Reputation: 24

You can use either span or i tag for fontawesome. But here you are using span to display the content Hello so you can use i tag for fontawesome.

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

Upvotes: 0

Related Questions