uRoot

https://www.youtube.com/watch?v=YDKskOH5sSw
или так

Тебе не обязательно создавать собственный иконочный шрифт. В таких ситуациях обычно обращаются к дизайнеру. Пусть он тебе скинет svg и с ней ты можешь делать все то, что и с иконочными шрифтами. Если же svg нет, то может стоит оставить png? Зависит от твоей задачи, если не надо менять цвет при наведении я бы не парился и поставил png

Неправильное название шрифта задаете https://jsfiddle.net/Vlad_IT/u8k36dov/

Попробуй "**/*" вместо "*.*"

1. div — можно, но как всегда есть нюансы
2. медиазапросы можно, но работают не везде
3. для некоторых клиентов по-прежнему надо инлайнить
4. использовать