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

Posted 2023-02-22

【中文标题】在 css 伪中添加谷歌材料设计图标：在内容之后

【英文标题】：Add google material design icon in css pseudo :after content

【发布时间】：2016-02-11 08:03:51

【问题描述】：

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

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

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

【参考方案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 中呈现。

你是我的英雄！