如何将Google图标字体添加到伪代码中：

我正在使用Google的材质设计图标字体。如何将Google图标字体添加到伪代码中：

但是我想叠加一个顶部的另一个。这个想法是添加一个：或前：元素和风格就这样的事情后：

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

但是，我不知道如何把这个：&#xE84E;到内容属性 - 我尝试了很多方式，以及在CSS技巧上使用转换器（这似乎不工作）。

任何帮助表示赞赏。

来源

2015-07-01 John Ohara

我的错误，单个半色有效，虽然已过时 – Amit

@Amit它并未过时，也没有浏览器已经或计划将其标记为折旧。冒号对于CSS2/2.1伪选择器是有效的和当前的，并且应当在所有情况下用于当前项目中的所述伪选择器。这是为了与旧版浏览器兼容，并且在新版浏览器中完美支持。但是，对于CSS3伪选择器，使用::可以。但是，更好的做法是使用：和::仅用于将来打样;当单个冒号语法不太受支持时。 –

@AndyJames - 参见[这里]（https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore） – Amit

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

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

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

来源

2015-07-01 09:04:06

这就是答案安迪 - 谢谢你的回答 –

例如在这个图标“＆＃xE313;”中，我们也必须删除'x'字符。我们必须这样使用：'\ E313' – Parhum

@Phhum谢谢你的例子。保存我的时间 – dc10

可以通过引用的原谷歌字体的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'; 
    } 
}

来源

2015-12-08 21:21:43

这对'.material-icons'使用不正确的CSS规则，因为它假定浏览器将始终是Chrome。正确的CSS规则[在文档中提供]（https://google.github.io/material-design-icons/#setup-method-2-self-hosting）。 – Koviko

：之前{content：'label'}应该可以在所有现代浏览器中使用。但同意这不是在官方文档 –

这不是我评论的部分。我正在评论你对'.material-icons'的定义。您拥有Google为Chrome浏览器提供的版本，但不支持Google为Firefox或IE提供的规则。 – Koviko

如何将Google图标字体添加到伪代码中：

回答

相关问题