How to create icon fonts?

Question

css

I found the site genericons.com , there are fonts (icons). Looking at the css, I saw that there is also svg involved. And then the icon can be called through the pseudo element :after/:before
For example
.test:before {
content: '\f431';
}
It is also possible to call via html. Plus somehow also compressed in the data-uri. How can something like this be implemented. Link / algorithm - I will be grateful.

Answer 1

May help
www.youtube.com/watch?v=YDKskOH5sSw
www.youtube.com/watch?v=ESXJ_0Fa0rs

Answer 2

fontello.com