如何将谷歌图标字体添加到伪元素:before中

Question

我正在使用谷歌的Material Design图标字体。

然而，我想将一个字体覆盖在另一个字体上面。我的想法是添加一个:before或:after元素，并将其样式设置为以下内容：

.material-icons:before
{
    position:absolute;
    content:"";
    color:@accent-color;
    font-size:2.4rem;
}

然而，我不确定如何将&#xE84E包含在内容属性中——我尝试了多种方法，还使用了CSS tricks上的转换器（似乎无效）。

非常感谢您的帮助。

- John Ohara

---

我的错误，单个分号是有效的，尽管已经过时。 - Amit

@Amit 它并不过时，也没有任何浏览器标记它为废弃。冒号在CSS2/2.1伪选择器中是有效且当前的，应该在所有情况下都使用该冒号来表示这些伪选择器。这是为了与旧版浏览器兼容，并且在新版浏览器中完全支持。然而，在CSS3伪选择器中，使用两个冒号(::)也是可以的。更好的做法是为了未来的兼容性，同时使用单个冒号(:)和两个冒号(::)。因为单个冒号语法的支持度可能会降低。 - Kana Ki

@AndyJames - 请查看这里。 - Amit

根据该页面，这是CSS2语法，并且需要支持旧浏览器 - 因此不会过时，并且不会因为支持使用该语法的站点而被弃用。对于兼容性，请使用：表示CSS2，使用::表示CSS3，否则将不受支持，对于大多数安全性，请同时使用两者。我在这里看不到任何争议。永远不要仅使用新语法来替换旧关键字。 - Kana Ki

Answer 1

CSS中，如果要指定一个在HTML中需要使用&转义的字符，例如✏，你需要使用\进行转义，例如content: "\9999"。

.material-icons:before {
     position: absolute;
     content: "\E84E";
     color: #882288;
     font-size: 2.4rem;
}

要显式地结束转义字符，请使用另一个 \，例如：content: "\E84E\ Hello World";

- Kana Ki

---

例如，在这个图标 "" 中，我们还需要移除字符 'x'。我们应该像这样使用：'\E313'。 - Parhum

Answer 2

您可以通过引用原始的Google字体CSS类来实现，该类为：

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

使用SASS，您可以使用伪CSS元素扩展它并设置内容：

ul
    &:before {
        @extend .material-icons;
        content: 'label';
    }
}

- Kim T

---

这里使用了错误的 .material-icons CSS规则，因为它假设浏览器始终是Chrome。正确的CSS规则在文档中提供。 - KOVIKO

:before { content: 'label' } 应该在所有现代浏览器中正常工作。但是同意这一点并未在官方文档中记录。 - Kim T

我并不是在评论那部分。我在评论你对于.material-icons的定义。你使用了Google提供给Chrome浏览器的版本，但没有使用Google提供给Firefox或IE的规则。 - KOVIKO

啊，好主意，已更新以包含正确的跨浏览器CSS。 - Kim T