На сайте пользователь может выбрать для своих записей разные иконки из базы, все иконки черно-белые и в формате png.
При таком раскладе дел, можете поиграть со следующими свойствами:
mix-blend-mode,
background-blend-mode,
filter, но с таким набором далеко не уедешь, учитывая что нужна чётная и удобная возможность менять цвет иконок(изображений). Всё усложняется тем что речь идёт об обычных пользователях, которым нужен удобный UI, а ещё тем что используемые иконки являются растровой графикой.
CSS хотя и обладает богатым набором функций, хаков, возможностей, но есть вещи которые невозможно сделать одним только CSS и смена цвета изображений есть в списке этих вещей. Нет, ну в той или иной степени можно конечно создать фильтры, всякие наложения, смешивание цветов, играть градиентами и что-то там крутить до посинения, надеясь что всё же выйдет, но это работает не всегда или выдаёт совсем не тот результат. Скажу проще: Не стоит заниматься забиванием гвоздей - микроскопом.
Пробовал иконки svg использовать со свойством fill, но один фиг не получалось сменить цвет, тк я ссылку на изображения вставляю.
Допустим у вас одноцветные иконки в формате SVG, тогда вместо добавления ссылки на иконку в теге img, вставляйте иконку как SVG в HTML разметку и проблем со сменой заливки не будет. Это будет наиболее выгодный и безболезненный способ решить данную задачу.
Однако если пойти другим путем и добавить к CSS, немного JS, то вот тогда можно сделать что-нибудь более менее удобное. Есть инструменты, способные реализовать "изменение цвета", как например этот
генератор css фильтров, но даже если подобные тулзы и решают те или иные задачи, всё же есть шанс что однажды это либо перестанет работать или что-то пойдёт не так.
Простой
Средний
