Question

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

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

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

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

content: "e622";

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

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

Answer 1

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

＆＃13;

@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;

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

1 个答案: