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 with the icon has should fill up all the height that the body needs. This works in all browser versions except IE. I have boiled it down in this fiddle

<div class="block">
  <div class="body">BODY</div>
</div>

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

.body {
    background-color: green;
    display: table;
    width: 25%;
}

If you add/remove the display: table-cell on the fiddle above using IE11 you will see where my problem is. Can someone give me a solution to this, or even better, explain what is happening.

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.