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

Question

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

我过去常常这样做

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

或那：

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

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

Answer 1

使用: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"将成为，必须将其包含在.fa元素中，以便应用正确的font-family：<i class="fa">&#xf16c;</i>。< / p>

例如：

＆＃13;

＆＃13;

::selection {
  color: #fff;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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