htmlcssfont-awesometextselectionicon-fonts

Is it possible to show TextSelection with an Icon Font?

I need to use Font Awesome in an WYSIWYG Editor, and want to, that the user can highlight the Icon with Text Selection.

I tried to user-select: all, but it doesn't work (The Icon is still not markable, when I select the text)

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

Is this possible?

I have found a workaround, see below. I am still happy about an answer on how to do this without the unicode with the :before selector class fa-check. Is this probably the reason? I tried:

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

  • It turned out, as a workaround, I can use the Cheatsheet and use the Unicode (e.g. &#xf00c;) instead of the 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>

    As this is a workaround, I am still happy about an answer on how to do this without the unicode with the :before selector class fa-check.