изменение цвета глификона svg с черного на добавление синего

Я знаю, как изменить цвет глификона Bootstrap. Однако я унаследовал внутреннюю структуру CSS, в которой я пытался использовать те же принципы, в которых я создаю класс с синим цветом, но это не работает.

У нас просто есть возможность слишком сильно изменить этот CSS-фреймворк, особенно не заменяя его бутстрапом. интересно, можно ли добавить

icon-weather-blue  (does not exist , only white and black)

Вот 2 существующих класса для этого

.icon-weather-white{background-image:url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20white%20!important%3B%20stroke%3A%20white%20!important%3B%20%7D%3C%2Fstyle%3E%3Cg%20stroke%3D%22%23363c3d%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18.12%2053.084h28.836c2.15-.03%206.54-.804%208.957-4.326%201.433-2.068%202.047-5.79%201.116-9.112-.945-3.368-3.932-6.3-6.527-7.5.356-3.044-1.375-6.266-3.778-8.048-2.594-1.925-5.972-2.31-8.35-.993-3.45-4.036-8.09-5.866-12.485-5.367-6.71.763-11.318%205.7-11.773%2014.52C6.73%2036.4%206.47%2044.162%209.42%2048.782c1.927%203.022%205.38%204.272%208.7%204.304z%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.95%2032.663c-6.24-1.672-9.943-8.085-8.27-14.325%201.67-6.24%208.084-9.942%2014.324-8.27%203.658.98%206.616%203.67%207.936%207.22l-10.963%204.077z%22%20stroke-width%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat:no-repeat}

.icon-weather{background-image:url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Cg%20stroke%3D%22%23363c3d%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18.12%2053.084h28.836c2.15-.03%206.54-.804%208.957-4.326%201.433-2.068%202.047-5.79%201.116-9.112-.945-3.368-3.932-6.3-6.527-7.5.356-3.044-1.375-6.266-3.778-8.048-2.594-1.925-5.972-2.31-8.35-.993-3.45-4.036-8.09-5.866-12.485-5.367-6.71.763-11.318%205.7-11.773%2014.52C6.73%2036.4%206.47%2044.162%209.42%2048.782c1.927%203.022%205.38%204.272%208.7%204.304z%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.95%2032.663c-6.24-1.672-9.943-8.085-8.27-14.325%201.67-6.24%208.084-9.942%2014.324-8.27%203.658.98%206.616%203.67%207.936%207.22l-10.963%204.077z%22%20stroke-width%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat:no-repeat}

person Community    schedule 06.10.2015    source источник


Ответы (1)


Вы можете найти цвет обводки в URI (на примере .icon-weather) здесь: stroke%3D%22%23363c3d%22. %3D — это =, %22 — это ", а %23 — это #, поэтому эта строка может быть прочитана как stroke="#363c3d". Таким образом, изменение только этой части: 363c3d изменит цвет обводки. См. пример.

person Josh Rutherford    schedule 06.10.2015