css - 使用内容属性获取图标？

Question

我正在编辑 WordPress 主题的 CSS，以使其更好地满足我的需求。据我所知，我遇到过什么可以检索不同社交媒体网站的图标。

.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }

我发现它在我提供的 url 中查找 flickr.com，但是 content 属性在做什么？我如何更改内容字段以支持其他站点，例如 StackOverflow？

Answer 1

就像@Paulie_D 说的，图标字体。

content属性指向图标字体集中的 Unicode 字符。 CSS 选择器将图标(通过伪元素)添加到 anchor 元素 <a>有一个包含 flickr.com 的链接.

这可能是巧合，但当前版本的 FontAwesome 使用相同的 unicode 字符 \f16e对于 Flickr。

至于“支持其他站点，例如 StackOverflow”，您将受制于图标字体。图标字体提供的就是您可以使用的。

如果网站确实在使用 FontAweseom，那么您将有很多可用的图标选项，包括 StackOverflow \f16c .这是所有 FontAwesome Icons 的列表.