内容忽略之前的伪元素\\在浏览器中

Question

I have this really basic issue I am trying to solve for a while now. I am running out of all ideas.

I have a css pseudo-element before that I am styling like this.

#fPhone::before{
    color: #78be20;
    content: "\e622";
    font-family: icons;
}

But on the browser it just prints out 622. When I inspect the pseudo tag, I see

content: "e622";

If I try adding "\\" in the debugger it works but for some reason it doesn't pick it up from css.

I am running out of reasons that could be causing this.

Answer 1

Sure you imported the icon-font correctly and are using the proper hexcode? Below proof that it works as you may expect...

 @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); #fPhone::before{ color: #78be20; content: "\\e0cd"; /* different code, but same effect */ font-family: 'Material Icons'; } /* class is pre-defined in @import (default <parent>color, 24px)*/ .material-icons { color: #78be20; font-size: 16px; } /* find the codes and ligatures for Material Icons at: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints */ 

 <div id="fPhone"> a phone</div> <div><i class="material-icons">phone</i> using ligature name</div>