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

Question

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

我以前也是这样

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

或者说：

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

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

Answer 1

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

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

因为伪元素don't actually exist in the DOM，不可能select他们：

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"></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值，然后删除伪元素并用直接添加到其中的unicode实体替换它HTML.

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

Change color of Font Awesome icons when they selected

css

icons

selection

font-awesome

pseudo-element