css - 选择时更改 Font Awesome 图标的颜色

Question

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

我以前也是这样

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

或者说:

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

和其他变化。没有任何效果。

Answer 1

使用 :before 添加了 Font Awesome 图标/:after伪元素。

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

因为伪元素don't actually exist in the DOM ，无法选择它们:

5.10 Pseudo-elements and pseudo-classes

Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.

要解决此问题，您必须避免使用伪元素并将图标直接添加到 HTML 中，这并不理想。 (example here)

因此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 实体。