strange highlighting of content when using icomoon in pseudo elements (Chrome)

[jdg...@gmail.com]

posting this in case it helps anyone - we recently struggled with a bug where clicking on an icomoon font used in a :before (& :after) pseudo element would highlight strange sections of content (both visible and invisible in some cases).

an example of this can be seen on icomoon's home page (http://icomoon.io/):
double-click on the top-left icon (h1#icon) and the text in the menu will get selected (up until the space between "icon" and "packs" - but if there was no space there it would select all of the text in the nav menu, including the mobile-responsive version of the menu).

the fix for this was to add the following css to the element that contains the :before or :after pseudo element (in the example above, add it to h1#icon):

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

maybe this is obvious to some, but we wasted some time on it and i thought it would be helpful to someone... especially icomoon.io webmasters ;)

cheers,
jd