是否可以使用图标字体显示 TextSelection？答案

【问题标题】：Is it possible to show TextSelection with an Icon Font?是否可以使用图标字体显示 TextSelection？
【发布时间】：2020-02-06 03:22:25
【问题描述】：

我需要在所见即所得编辑器中使用 Font Awesome，并且希望用户可以使用文本选择突出显示图标。

我尝试user-select: all，但它不起作用（当我选择文本时，图标仍然不可标记）

.select-text {
  user-select: all !important;
}

.select-text::selection {
  background: red !important;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>
    <span class="select-text">Hello </span>
    <span class="fa fa-check select-text"></span>
    <span class="select-text"> World</span>
</p>

这可能吗？

我找到了解决方法，请参见下文。我仍然很高兴知道如何使用:before 选择器类fa-check 在没有 unicode 的情况下执行此操作。大概是这个原因吧？我试过了：

.select-text:before::selection {
    background: red !important;
}
.select-text:before {
    user-select: element !important;
}

【问题讨论】：

标签： html css font-awesome textselection icon-fonts

【解决方案1】：

事实证明，作为一种解决方法，我可以使用 Cheatsheet 并使用 Unicode（例如 &#xf00c;）而不是类。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>
    <span class="fa">&#xf00c;</span>
</p>

_{由于这是一种解决方法，我仍然很高兴得到一个关于如何在没有 unicode 的情况下使用 :before 选择器类 fa-check 的答案。}

【讨论】：