Gylphicon not displaying correctly

Question

If I use this markup:

<span class="glyphicon glyphicon-resize-vertical"></span>

the icon displays fine. However, if I use this css rule:

.section-header::after {
    content:"\e119";
    float: right;
    padding-left: 1em;
}

it just displays the generic missing font square image.

Searching on the web it looks like other people have a similar issue but those seem to be resolved by correcting the location of the glyph-icon font files, however mine is in completely the right place, i.e. relative to the css it is at ..\fonts\

What else might the problem be?

Answer 1

You need to define font-family, try the following CSS, it should work

.section-header::after {
   content:"\e119";
   float: right;
   padding-left: 1em;
   font family: Glyphicons Halflings;
}

Answer 2

Add font-family like this: Demo

.section-header::after {
    font-family:'Glyphicons Halflings';
    content:"\e119";
    float: right;
    padding-left: 1em;

}