在 css 伪中添加谷歌材料设计图标：在内容之后答案

【问题标题】：Add google material design icon in css pseudo :after content在 css 伪中添加谷歌材料设计图标：在内容之后
【发布时间】：2016-02-11 08:03:51
【问题描述】：

我只是想在悬停链接的内容中添加一些谷歌材料设计icons：

a:hover::after {
    content: "<i class="material-icons">link</i>"
}

但它不起作用，请看我的fiddle。

【问题讨论】：

标签： html css material-design

【解决方案1】：

如果你想在 css 中使用 Material Icons 伪试试这个：

.p::before{
   font-family: "Material Icons";
   content: '\F019'
}

【讨论】：

【解决方案2】：

如果您想使用包含两个或更多单词的 Material Icon，那么您需要像这样使用下划线分隔符：

a:hover::after {
  font-family: 'Material Icons';
  content: "chevron_right";
}

【讨论】：

【解决方案3】：

C.Schubert 的回答差不多了，但如果您还想获得 IE10+ 支持，您需要添加 font-feature-settings: 'liga' 1; 所以完成的样式将如下所示...

a:hover::after {
  font-family: 'Material Icons';
  content: "link";
  -webkit-font-feature-settings: 'liga' 1;
  -moz-font-feature-settings: 'liga' 1;
  font-feature-settings: 'liga' 1;
}

就像 C.Schubert 所说，将 content: "[whatever icon here]"; 更改为您想要的图标。

【讨论】：

【解决方案4】：

将您的 CSS 更改为：

a:hover::after {
  font-family: 'Material Icons';
  content: "link";
  -webkit-font-feature-settings: 'liga';
}

所以你可以更改content: "[whatever icon here]";

FIDDLE

而且小提琴没有正确加载图标字体，所以我把链接放在了 html 中。

【讨论】：

在一个懒惰的星期四为我工作得很好。谢谢舒伯特先生。
什么是 -webkit-font-feature-settings ？我收到“您的搜索 --webkit-font-feature-settings - 与任何文档都不匹配”。在谷歌搜索中 (O.o)
@gerdi “font-feature-settings CSS 属性让您可以控制 OpenType 字体中的高级排版功能。” developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
很重要的添加：font-feature-settings: 'liga';如果你想让你的 Material 图标在 Firefox 中呈现。
你是我的英雄！