What are icons of the video.js player skins?

We have received several questions about icons used across video.js player skins by Nuevodevel.com.

Generally, all icons are vector icons inserted in HTML via the CSS @font-face declaration in exactly the same way as default video.js font in default css stylesheet. The font in skins by Nuevodevel.com is named "nuevo" and is declared in the skin css file as Base64 encoded WOFF font.

Since version 8.0 of our flag "Nuevo" plugin we deliver the font in SVG, TTF and WOFF format for each skin. It is easy to import SVG font into font editor and edit each single icon. Our favourite icon font generator is free IcoMoon App.

IcoMoon allows to import SVG, and generate crisp icon font in SVG, TTF, WOFF and OTT format. It also allows to browse 5500+ free vector icons and use it in your project. Basic glyph editing is available for each single icon (size, position, scale). Each single icon can be replaced by other SVG icon.

Once all icons ready, you can generate and save font icon. To use the font in the Nuevo skin css stylesheet you must convert SVG font to Base64 encoded WOFF font. There is great css @font-face Transfonter generator, which produce ready CSS @font-face rule. Just add SVG font generated by IcoMoon, check WOFF format and Base64 encode option. Click to convert and save generated ZIP. In file "stylesheet.css" you will find the @font-face rule ready to insert/replace in one of Nuevo skins CSS.

And the last suggestion concerning creating and editing SVG. There are many editors around and one of the best is free design tool Inkscape.