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

【问题标题】：Change color of Font Awesome icons when they selected选择时更改 Font Awesome 图标的颜色
【发布时间】：2015-06-01 21:04:55
【问题描述】：

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

我以前也是这样的

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

或者说：

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

以及其他变体。没有任何效果。

【问题讨论】：

标签： css icons selection font-awesome pseudo-element

【解决方案1】：

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

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

由于伪元素don't actually exist in the DOM，所以无法选择：

5.10 Pseudo-elements and pseudo-classes

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

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

因此content: "\f16c" 将变为&#xf16c;，必须将其包装在.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 实体。

【讨论】：