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

Question

我需要在 WYSIWYG 编辑器中使用 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>

这可能吗？

---

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

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

Answer 1

事实证明，作为解决方法，我可以使用 Cheatsheet并使用 Unicode(例如 )代替类。

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