css icon without image

Question

How are icons / images shown (, , ) which appear to be a normal character (as if i would enter b,d,r)

<p>
<span data-preserver-spaces="true">
If your team is a bit more "fun", you can always give these alternate signals a shot: 
✨ (<span style="font-family: 'andale mono', 'lucida console';">feat</span>), 
 (<span style="font-family: 'andale mono', 'lucida console';">fix</span>), 
 (<span style="font-family: 'andale mono', 'lucida console';">docs</span>), 
 (<span style="font-family: 'andale mono', 'lucida console';">style</span>), 
♻️ (<span style="font-family: 'andale mono', 'lucida console';">refactor</span>), 
 (<span style="font-family: 'andale mono', 'lucida console';">perf</span>), 
✅ (<span style="font-family: 'andale mono', 'lucida console';">test</span>), 
 (<span style="font-family: 'andale mono', 'lucida console';">build</span>), 
 (<span style="font-family: 'andale mono', 'lucida console';">ci</span>), 
 (<span style="font-family: 'andale mono', 'lucida console';">chore</span>).
</span>
</p>

In case it does not render on every browser i copied the code above to this codepen and attach this screenshot here

Question

• How does it work?
• Is there a (built in?!) font and are these icons some UTF-* or hex-codes?

not relevant

Answer 1

Yes, they are all Unicode characters, and the fonts have to deal with them of course, that's why you sometimes encounter an empty rectangle or a question mark instead of the actual icon. You can play around with this tool that tells you what character is it.

The tool balestone returns the unicode for a given input.

Pasting in the characters for bug, books, rocket ( ) resulted in

U+1F41B : BUG
U+1F4DA : BOOKS
U+1F680 : ROCKET