当字体图标被选中时，更改它们的颜色

Question

我可以使用::selection伪元素更改Font Awesome图标的颜色吗？

我以前很喜欢

.icon i::selection {
  color: #fff;
}

或者说：

.icon i:before::selection {
  color: #fff;
}

以及其他变体。什么都没用。

Answer 1

Font真棒图标是使用:before/:after伪元素添加的。

.fa-stack-overflow:before {
  content: "f16c";
}

由于DOM中实际上并不存在伪元素，因此无法选择它们：

5.10伪元素和伪类

伪元素和伪类都不会出现在文档源或文档树中。

要解决这个问题，您必须避免使用伪元素，并将图标直接添加到HTML中，这并不理想（此处为示例）

因此，content: "f16c"将变为，它必须被封装在.fa元素中，以便应用正确的font-family：<i class="fa">&#xf16c;</i>。

例如：

::selection {
  color: #fff;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Selectable since it's added directly to the HTML: <i class="fa">&#xf16c;</i>

一种更动态的方法是使用JavaScript获取伪元素的计算content值，然后删除伪元素，并用直接添加到HTML中的unicode实体替换它。