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

Question

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

我试过user-select: all，但没用（当我select文本时，图标仍然不可标记）

.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 select 或 class fa-check 的 unicode 的情况下执行此操作的答案。大概是这个原因？我试过了：

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

Answer 1

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

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

_{由于这是一种变通方法，我仍然很高兴能够回答如何使用 :before 选择器 class fa-check 在没有 unicode 的情况下执行此操作。}

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

Is it possible to show TextSelection with an Icon Font?

html

css

font-awesome

textselection

icon-fonts