Как поменять фон у маски?

Question

[caof19]

Здравствуйте, возникла проблема. Есть блок 50х50, он должен быть красного света, а внутр него svg, черного цвета, которая используется в качестве маски. Маска используется для того, чтоб когда у блока отсутствует класс active - задний фон становился серым, а иконка белой. Цвет иконки я научился менять, но не могу изменить цвет самого блока. Собственно вот так это выглядит сейчас

Comments

[Rustam Bainazarov]

Вы не могли бы прислать макет того, как это должны быть в конечном виде в двух состояниях?

Есть подозрение, что вам тут вообще маска и это всё не нужно.

[caof19]

Да в общем-то решил проблему, но буду благодарен, может подскажите способ на который я не обратил внимания

Слева активное состояния, справа неактив.

[Rustam Bainazarov]

caof19, у меня такой вопрос, а иконка должна обязательно быть фоном? А то так обычно не делают.

Делают либо вставку иконки с помощью либо svg#use, либо с помощью шрифта (шрифтовые иконки). И с таким подходом всё сильно упрощается.

Да, и обязательно указывайте в сообщении никнейм через @, иначе адресат не видит вашего сообщения в уведомлениях.

[caof19]

Рустам Байназаров, В общем-то это не принципиально, Вы намекаете на fontawesome?

[Rustam Bainazarov]

caof19, FontAwesome — лишь готовый набор шрифтовых иконок. Его можно сделать самому. Либо, что лучше, использовать SVG-спрайт с иконками в symbol и обращаться к ним через разметку.

Последний подход использован, к примеру, на Toster. Все иконки — вызываются из общего файла на сервере.

[Rustam Bainazarov]

caof19, вот пример SVG#use, но не из внешнего файла:



Как видите, в таком случае все эти манипуляции с цветами и стилями очень простые. Осталось заменить на вызов #use из внешнего файла.

[caof19]

Рустам Байназаров, Спасибо, первый раз забыл нажать на кнопку "Ответить".
Честно говоря, ранее использовал FontAwesome - было удобно. Просто проблема в том, что именно таких иконок там нет. Я могу сам создать такую иконку, в виде шрифта?

[Rustam Bainazarov]

caof19, конечно, вы можете сделать любой иконочный шрифт сами, например, с помощью:
https://icomoon.io/app/#/select

Либо с помощью сборщиков а-ля Gulp (куча плагинов для них).

[Rustam Bainazarov]

caof19, но лучше использовать SVG#use из внешнего файла (требует простой полифил для IE11 и EDGE 12–15):

Подробнее о преимуществах:
https://www.keycdn.com/blog/icon-fonts-vs-svgs

Полифил:
https://github.com/jonathantneal/svg4everybody

[caof19]

Рустам Байназаров, Большое спасибо, гляну в свободное время.