What technique used to make css content into icon?

Question

Often we can see CSS coding practices that use pseudo class such as before or after along with content inside it to eventually make it become an icon. such as

.email:before {content: '\e600'; font-family: special-font}

I think this question could be more relevant to how font-family works to render icon. Any idea on how does this works are welcome or point me some directions that I can do more research.

Answer 1

Maybe this will help?

Icon Fonts: How do they work?

Basically, the content code maps to a point in the font. The font is actually an icon. That css is a way to place the icon in the content without actually specifying it in the html content.

Full explanation here: https://webstandardssherpa.com/reviews/responsive-webfont-icons/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffereac5b&utm_medium=google