In IE11 using pseudo element ::before and display:table-cell and glyphicons contens wont show up

Question

I\'ve spent a rather good time on this now but cant come to a solution. My problem is that I want to display a glyphicon before the content of a text-block and that element

Answer 1

There is an active bug report about this issue in Microsoft Connect website. On IE, font-family decleration is ignored in pseudo-element with display: table-cell; property.

To workaround this problem, you need to set display: inline-block;.

Answer 2

Adding float:left to .body does the trick

.body:before {
    background: blue;
    content: "\e005";
    font-family: "Glyphicons Halflings";
    display: table-cell;
    width:30%;
    float:left;
}

fiddle

---

I will keep this previous answer here. Users may find it useful:

You can try using content: "\2665" instead of "/e005"

.body:before {
    background: blue;
    content: "\2665";
    display: table-cell;
    width:30%;
}

fiddle

Click here for more info.