Хотелось бы поговорить о формате Svg.
Столкнулся вот с таким кодом <path d="M26 13.47l-.09-.17a13.55 13.........." fill="#fff"/>
разобравшись понял что через path можно будет применить и иной цвет для svg.
Но что делать когда таких элементов нету, пробовал добавлять, но безрезультатно.
Спасибо
Посмотри css свойство fill. Пример - https://jsfiddle.net/bsdqu2of/ fill применяется на hover
можете здесь глянуть, как в положении active(или любом другом) задать иной любой цвет для svg
Это не SVG - там под капотом просто картинка: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...
ок, а как в таком случае сделать active для неё? есть варианты?
Если в svg вставлена картинка и это все что есть в svg , то смысла в svg нет - просто используй картинку.
Можно сделать трюк с подменой background-image. Только предварительно закешируй картинку для состояния active.
А можно трюк с background-position картинки в элементе ограниченного размера.
Если не понятно о чем я, сделай заготовку в codepen с png - я покажу код. Та заготовка что есть (что зашарпал выше) имеет кучу ненужного кода.
О, есть решение в рамках твоей реализации. В отличии от предыдущей селектор :active нужно применять к a https://codepen.io/anon/pen/yGBPoB
что-то я не уловил, актив работает на самом круге, а я думал ещё есть возможность на эктив поставить саму иконку. или же цвет фона круга не меняется а сама иконка меняет цвет, вот основной вопрос)
спасибо
Можно импользовать тот-же подход (с ::after), но иконку поставить как фон в элементе ::after, а на :active менять не background-color, а background-image
Ну как вариант) только это отдельно иконку надо будет подкрасить)