For instance, the below will sometime appear as a square and a letter u, respectively. How can I avoid inconsistencies?
content: "\E07A"; // Shopping cart icon
content: "\1F50E"; // Search icon
By inconsistencies I mean displaying inconsistently on the same machine and same browser. Sometimes it loads correctly, and sometimes it doesn't.
When you load a font with that glyph in it (through @font-face), it will work consistently. When you don't, you are dependent of the fonts on the machine of the user. In that case you can better replace these 'icons' with SVG images, like this:
content:url('cart.svg');