2015-10-06 2 views
1

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

У нас просто есть возможность слишком сильно изменить эту структуру 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} 

ответ

3

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

.