Антон Антон

https://jsfiddle.net/xcrbvkdf/2/

Учитывая соотношение сторон иконок фонтэйвесом 1.25:1 (максимум, есть от квадратных до таких), решение для подключения через шрифт в общем случае такое: https://codepen.io/FragsterAt/pen/OJQmqow
Для индивидуальных иконок можно подобрать свои размеры.

Задай заливку и всё заработает: https://jsfiddle.net/ancz2vb3/

можно обернуть всё в контейнер, у которого использовать псевдокласс :focus-within , примерно так: https://jsfiddle.net/j1oy8Ls3/2/

у родителя position: relative у детей - position:absolute и left вместо отступа

https://jsfiddle.net/xgnm5a62/

https://jsfiddle.net/2sp1k9L0/28/

https://ru.vuejs.org/v2/guide/transitions.html#%D0...

вроде все работает: https://jsfiddle.net/vyxb2sjL/1/

https://jsfiddle.net/zdmsaxko/15/

Блок в размер картинки, у которого два фона - картинка и градиент https://developer.mozilla.org/en-US/docs/Web/CSS/C...
ну или псевдоблок :after над картинкой с абсолютным позиционированием и фоном с градиентом.

На мобилке нет шрифта monserrat, используется дефолтный sans-serif (что-то типа roboto). На десктопе, возможно, тоже нет, но подключается какой-нибудь arial. Нужно нормально подключить @font-face

Выбрать шрифт с одинаковой шириной цифр (хоть calibri, да и вообще их много на любой вкус), или обернуть каждую цифру в inline-block с шириной самой широкой цифры (1ch) выравниванием текста по центру.

с такой нарезкой попроще стало?

что-то типа такого: https://jsfiddle.net/Lsu6venk/