Question

我正在使用Google的素材设计图标字体。

但是我想把一个fone叠加在另一个上面。我的想法是添加一个：before或：after元素，并将它设置为：

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

但是，我不确定如何合并：&#xE84E;进入内容属性 - 我尝试了很多方法以及在CSS技巧上使用转换器（似乎不起作用）。

任何帮助表示感谢。

Answer 1

在CSS中，指定一个字符，否则您将在HTML中使用&转义指定;例如; ✏，您必须使用\转义符，例如content: "\9999"。

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

要明确结束转义字符，请使用其他\，例如content: "\E84E\ Hello World";

Answer 2

您可以通过引用原始的Google Font 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';
    }
}

如何将Google图标字体添加到伪：之前

2 个答案: