Antony Bark

Это можно легко сделать при помощи -webkit-mask

По-хорошему, псевдоэлементы ::before и ::after бывают только у парных тегов (несмотря на то, что браузеры могут пытаться что-то там изобразить и порою даже успешно)
Нужно обернуть каждую картинку в оберточку и по ней заполнять картинку, можно с использованием object-fit

И вашего варианта:
Ширина
Как интересно вы считаете, 4 раза по 25% и еще между ними отступы по 3%. Вы планировали всё это уместить в 100%? Не выйдет.
Ещё вы туда же добавляете границы.
Чтобы ширина границ считалась "внутрь" используйте box-sizing: border-box

Высота
По умолчанию flex растягивает "строки" (при flex-direction row) и высоту элементов в них.
Чтобы он перестал это делать, нужно задать align-content: start

Я использую либо символьные спрайты, либо инлайн.
Все иконки ручками корректирую в люстре. Привожу к единому вьюбоксу, центрирую и выравниваю по пикселям.

CSS-детекция ненадёжна:
https://developer.mozilla.org/en-US/docs/Web/CSS/@...
https://developer.mozilla.org/en-US/docs/Web/CSS/@...

В Android Chrome срабатывает какого-то дьявола первое:


Лучше использовать любой JS-скрипт, определяющий сенсорный экран, ставить класс на body, после чего писать стили отдельно для этого случая. Стили для сенсора нужно ставить для :active вместо :hover.

Я использую этот простой скрипт:

https://developer.mozilla.org/ru/docs/Web/CSS/mix-...

Или на js, собирая заранее известно инверсные блоки и сверяя их положение с объектом или высчитывая цвета. В общем тут раздолье мысли.

Качаешь шрифты откуда угодно,
Конвертируешь в woff woff2
Кидаешь в проекте в папку fonts
И подключаешь их из папки

Это самый оптимальный вариант!

Самое приближенное, что я смог найти
А тут подробная статья, если постараться, то сможете добиться нужного эффекта

Можно попробовать сделать такой дымок AfterEffects, наверняка есть куча туториалов. Потом экспортировать с помощью bodymovin в json формат для lottieweb

Еще можешь попробовать использовать партиклы и заставить двигаться как надо
stemkoski.github.io/Three.js/Particle-Engine.html
squarefeet.github.io/ShaderParticleEngine

Собственно вот похожее: https://mrdoob.com/#/144/magic_dust

Можно спрайтами, у меня дыма готового нет, но есть свеча для примера: