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

时间:2015-10-29 21:37:16

标签: html css html5 css3 pseudo-element

我有一个非常基本的问题,我现在试图解决一段时间。我的所有想法都用完了。

之前我有一个css伪元素,我就像这样造型。

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

但是在浏览器上它只打印出622.当我检查伪标签时,我看到了

content: "e622";

如果我尝试添加" \"在调试器中它可以工作但由于某种原因它不能从css中获取它。

我没有可能导致这种情况的原因。

1 个答案:

答案 0 :(得分:0)

确定您正确导入了图标字体并使用了正确的十六进制代码?以下证明它可以正常运作......



@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

*/
&#13;
<div id="fPhone"> a phone</div>
<div><i class="material-icons">phone</i> using ligature name</div>
&#13;
&#13;
&#13;