It’s the same thing with emoji. Emoji uses at least two PUA character to represet single emoji character (the second one usually used as the modifier; e.g. an icon of a person with skin color variant).
The .material-icons class was used to make 'Material Icons' font family only applied to an element with that class name. It means that if you put that class name to the <body> element, it will replaces any “add” text inside your <body class="material-icons"> element into a plus icon and left others untouched. That’s how font ligature works. It merges a series of characters into one and treat them as a single glyph.
So, it’s really inside the font file and not about the text. In your case, Material Icons font has treated “add” text as a single character. That’s it.
Google this: “font ligature”.
It’s the same thing with emoji. Emoji uses at least two PUA character to represet single emoji character (the second one usually used as the modifier; e.g. an icon of a person with skin color variant).
I searched for "font ligature".
I think you mean what is described in the article below.
webdesign.tutsplus.com/articles/yo...
When we examine the classes, font-family: 'Material Icons' appears.
But I could not understand how it matches the text and codes with each other.
The
.material-iconsclass was used to make'Material Icons'font family only applied to an element with that class name. It means that if you put that class name to the<body>element, it will replaces any “add” text inside your<body class="material-icons">element into a plus icon and left others untouched. That’s how font ligature works. It merges a series of characters into one and treat them as a single glyph.Another example of font ligature implementation can be found in this font: github.com/tonsky/FiraCode
So, it’s really inside the font file and not about the text. In your case, Material Icons font has treated “add” text as a single character. That’s it.
Thank you Taufik Nurrohman. I will review the resource you shared.